Question

我有这个小的javascript来检查电子邮件是否有效，我检查客户端，认为邮件是有效的100％重要，我不想重新指导用户只是检查。

问题是弹出窗口是apear，但用户值仍然插入

  <script>
function popup()
{  

    var email = document.getElementById("email").value;
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");

if (document.getElementById("email").value == "") {

    alert("Enter an email");
    return false;

 }
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {

    alert("The email is not valid");
    return false;

 }
else
    window.location = "email.php";
    return true;
}
   </script>

这是HTML表单

 <form action="email.php" accept-charset="UTF-8" class="signup_form" id="signup_form" method="post">


<input class="txt accent-color colorize_border-color required" id="email" name="email" placeholder="Indtast E-mail her" data-label-text="Email" type="email">

<input class="submit button big btn" id="submit_button" name="submit" value="Deltag nu!" onclick="return popup()"  type="submit">

</form>

如果我删除“类型提交”它可以工作，但我没有在下一页上获得带有$ _POST的值，它们是空的。

有什么方法可以解决这个问题吗？

Answer 1

Canonical

window.onload=function() {
  document.getElementById(("signup_form").onsubmit=function() {
    var email = document.getElementById("email").value;
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");

    if (document.getElementById("email").value == "") {
      alert("Enter an email");
      return false;
    }
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
      alert("The email is not valid");
      return false;
    }
    return true;
  }
 }

使用

<form action="email.php" accept-charset="UTF-8" class="signup_form" id="signup_form" method="post">
  <input class="txt accent-color colorize_border-color required" id="email" name="email" placeholder="Indtast E-mail her" data-label-text="Email" type="email">
  <input class="submit button big btn" id="submit_button" name="submit" value="Deltag nu!"   type="submit">
</form>

为什么使用JavaScript进行表单验证不会阻止表单被发送？

1 个答案: