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。

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

2 个答案: