Question

我有两个文本字段，其中的id希望在注册前进行表格检查，以确认号码和电子邮件是否有效。电子邮件必须采用正确的格式，并且数字必须完全由11位数字组成。两者都不匹配将显示错误消息。

在电子邮件中，我尝试了一个验证电子邮件功能，变量中包含所需的格式和符号。至于我尝试的数字“ c.length！== 11”

每当我尝试单击注册按钮时，都不会改变。

JAVASCRIPT：

function validateEmail(v_email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(v_email);
}

document.getElementById("register").onclick = function () {

var contact = document.getElementById("contact").value;
var email = document.getElementById("email").value;


  let c = contact.val() + ''; // make sure it's a string
  c = c.trim()// trim it
  if (c.length !== 11) {
      document.getElementById("number_label").innerHTML = "<span style='color: red;'>Invalid contact number (must contain 11 digits)</span>";
  } else {
      document.getElementById("number_label").innerHTML = "Contact Number";
  }


  if (validateEmail(v_email)) {
    document.getElementById("email_label").innerHTML = "Email";
  } else {
    document.getElementById("email_label").innerHTML = "<span style='color: red;'>Invalid email address</span>";
  }


return false;
}

HTML：

<form class="form-horizontal" action="register.php" method="post">
  <div class="container rg_box">
    <br>

    <label id="number_label"><b>Contact Number</b></label>
    <input type="text" placeholder="Contact Number" class="form-control" id="contact" name="contact" autocomplete="off"
    value="<?php
      if(isset($_POST["contact"])) {
        echo($_POST["contact"]);
      } ?>">

    <label id="email_label"><b>Email</b></label>
    <input type="text" placeholder="Email Address" class="form-control" id="email" name="email" autocomplete="off"
    value="<?php
      if(isset($_POST["email"])) {
        echo($_POST["email"]);
      } ?>">

      <input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER">
      <br><br>

      <p class="text-align-center">Already have an account? <a href="index.php">Login Here</a><p>
    <br>
  </div>
</form>

Answer 1

您有很多小错误，但是下面的这段代码应该可以正常工作（未测试）

更改：

contact变量没有val函数，因为它是一个字符串（或整数），contact变量已经保存了输入的值。
validateEmail的参数错误，您复制了函数声明，但忘记将传递的变量更改为email
添加了flag var，这样您就可以知道是否发生了错误，如果发生错误，我们的标志将为true，因此稍后我们检查-如果标志为true，则我们有错误，请不要继续，只是return false;

现在应该工作。

function validateEmail(v_email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(v_email);
}

document.getElementById("register").onclick = function () {

var contact = document.getElementById("contact").value;
var email = document.getElementById("email").value;
var flag = false;

  let c = contact + ''; // make sure it's a string
  c = c.trim()// trim it
  if (c.length !== 11) {
      document.getElementById("number_label").innerHTML = "<span style='color: red;'>Invalid contact number (must contain 11 digits)</span>";
flag = true;
  } else {
      document.getElementById("number_label").innerHTML = "Contact Number";
  }

  if (validateEmail(email)) {
    document.getElementById("email_label").innerHTML = "Email";
  } else {
    document.getElementById("email_label").innerHTML = "<span style='color: red;'>Invalid email address</span>";
flag = true;
  }

if(flag) {
  return false;
} 
}

注意：关于接触变量，仅检查其长度是否为11，这意味着“我只是tst”将通过测试。表单中的第一条规则，您不得信任用户的任何输入，并且必须检查服务器上的输入。

最好的方法是在Javascript中进行“浅”测试，以确保检查所有明显的内容，然后对后端（您的PHP代码）中的输入进行认真检查

Answer 2

您不需要使用JavaScript来验证电子邮件或将#contact的输入限制为11。您可以仅使用属性type="email"来验证电子邮件输入，还可以使用maxlength="11"来限制#contact输入的长度。最后，添加required属性，以确保除非输入内容经过验证，否则联系表单不会提交。

<input type="text" maxlength="11" id="contact" name="contact" required>
<input type="email" id="email" name="email" required>

但是，您确实需要使用一些JavaScript来确保#contact中的所有输入字符都是数字。

这是一个代码段，其中添加了必要的JavaScript并定义了以上属性：

/* JavaScript */

document.getElementById("contact").addEventListener("keydown", function(e) {
    if(e.keyCode !== 8 && (e.keyCode < 48 || e.keyCode > 57)){
    	e.preventDefault(); // refuse input if the key inputted is not either a number or the BACKSPACE key
    }
});

<!-- HTML -->

<form class="form-horizontal" action="register.php" method="post">
  <div class="container rg_box">
    <br>

    <label id="number_label"><b>Contact Number</b></label>
    <input type="text" placeholder="Contact Number" maxlength="11" class="form-control" id="contact" name="contact" autocomplete="off" required>
    <hr />
    <label id="email_label"><b>Email</b></label>
    <input type="email" placeholder="Email Address" class="form-control" id="email" name="email" autocomplete="off" required>
    <hr />
      <input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER">
    <br>
  </div>
</form>

电子邮件验证和号码长度不起作用

2 个答案: