Javascript - 在表单提交上执行所有验证功能

Question

我目前正在处理一个电子邮件表单，对 javascript 几乎没有经验，但我已经接近完成我需要的工作，但有一段时间很挣扎，花了几个小时尝试我能找到的所有搜索，并认为这里有人可能会立即得到我的答案.

我目前有 3 个功能检查一个框是否已填写、电子邮件格式是否正确以及密码是否匹配。 如果我将每个函数设置为在单击提交时自行运行，它们可以完美地达到自己的预期目的，但是我无法弄清楚如何制作它以便在点击提交时运行所有 3 个函数。我最后一次似乎最接近的尝试是在我的脚本底部添加 validateForm 函数来运行所有脚本，但这似乎不起作用。希望我忽略了一些小事，感谢任何帮助。

HTML：

<form name="registerkeys" form action="form.php" method="post" onsubmit="return validateForm();">
First Name:  <input type="text" name="first_name"><br>
Last Name:  <input type="text" name="last_name"><br>
Email:  <input type="text" name="email"><br>
Phone Number:  <input type="text" name="phonenumber"><br>
Information on Key:  <input type="text" name="keyinfo"><br>
Password:  <input type="password" name="password" id="password"></label><br>
Verify Password:  <input type="password" name="passwordverify" id="passwordverify"><br>
Password Hint:  <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Comments:"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

Javascript：

function validateFill(){
    var x=document.forms["registerkeys"]["first_name"].value;
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["last_name"].value;
    if (x==null || x=="") {
        alert("Last name must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["phonenumber"].value;
    if (x==null || x=="") {
        alert("Phone number must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["keyinfo"].value;
    if (x==null || x=="") {
        alert("Key info must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["pass1"].value;
    if (x==null || x=="") {
        alert("Password must be filled out");
        return false;
  }

    var x=document.forms["registerkeys"]["passwordhint"].value;
    if (x==null || x=="") {
        alert("Password hint must be filled out");
        return false;
  }

} 


function validateEmail()
{
var x=document.forms["registerkeys"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}


function validatePassword(){
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var ok = true;
    if (password != passwordverify) {
        alert("Passwords Do not match");
        document.getElementById("password").style.borderColor = "#E34234";
        document.getElementById("passwordverify").style.borderColor = "#E34234";
        ok = false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}


function validateForm(){
    var a = validateFill();
    var b = validateEmail();
    var c = validatePassword();
    return a && b && c;
}

Answer 1

您的 validateFill() 和 validateEmail() 函数应在最后返回 true。

validateFill() 仅在验证未通过时返回 false，但从不返回 true。您应该在函数末尾添加return true，在条件之外。

validateEmail() 如果电子邮件无效，则返回 false，但如果电子邮件有效，则您缺少 return true。

另外，为防止重复弹出窗口，我建议您将 validateForm() 更改为以下内容：

function validateForm() {
 var a = validateFill();

 if (a) var b = validateEmail();
 else var b = false;

 if (a&&b) var c = validatePassword();
 else var c = false;

 return a && b && c;
}

所以它只检查一个函数直到它通过，然后检查下一个。

Answer 2

validateFill() 和 validateEmail() 最后应该是 return true （现在如果验证通过，它们不会返回任何内容。

validatePassword() 应该返回 true 而不是 ok。