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

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

您有很多小错误，但下面的代码应该按预期工作(未测试)

变化:

1. contact 变量没有 val 函数，因为它是字符串(或 int)，contact 变量已保存以下值输入。
2. validateEmail 获取了错误的参数，您复制了函数声明，但忘记将传递的变量更改为 email
3. 添加了 flag var，这样您就可以知道是否发生了错误，当出现错误时，我们的标志将为 true，因此稍后我们会检查 - 如果标志为 true，则我们有错误，所以不要'不继续，只需返回 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;
} 
}

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

最好的方法是在 Javascript 中进行“浅层”测试，以确保检查所有明显的事情，然后认真检查后端的输入(您的 PHP 代码)