Javascript 如何在提交之前确保所有内容都有效？_Javascript_Html_Forms

Javascript 如何在提交之前确保所有内容都有效？

javascript html forms

Javascript 如何在提交之前确保所有内容都有效？,javascript,html,forms,Javascript,Html,Forms,我有一个HTML5表单，我正在使用javascript验证表单我有几个“如果”检查表单，如果它有效，他们会将变量（“pass”）更改为true或false。它们还显示一条错误消息。问题是，即使只有一件事是有效的，它也会改变变量是真的，我只需要它使pass为真，如果其他一切都是有效的我的HTML： <!DOCTYPE html> <html> <head> <title>Register</title> </head&g

我有一个HTML5表单，我正在使用javascript验证表单

我有几个“如果”检查表单，如果它有效，他们会将变量（“pass”）更改为true或false。它们还显示一条错误消息。问题是，即使只有一件事是有效的，它也会改变变量是真的，我只需要它使pass为真，如果其他一切都是有效的

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
</head>
<body>
    <div>
        <form name="register" action="register.php" method="POST" >
            <label>First Name:</label>
            <input type="text" id="firstName" name="firstName"><br />
            <label id="warning_first"></label>
            <br />
            <label>Surname:</label>
            <input type="text" id="lastName" name="lastName"><br />
            <label id="warning_second"></label>
            <br />
            <label>Gender:</label>
            <input type="radio" name="gender" value="Male" id="male">Male
            <input type="radio" name="gender" value="Female">Female
            <input type="radio" name="gender" value="Other">Other
            <input type="radio" name="gender" value="Prefer not to say"> Prefer not to say <br />
            <label id="warning_third"></label>
            <br />
            <label>Email:</label>
            <input type="email" id="email" name="email"> <br />
            <label id="warning_fourth"></label>
            <br />
            <label>Confirm Email:</label>
            <input type="email" id="confirmEmail" name="confirmEmail">
            <br />
            <label>Mobile:</label>
            <input type="tel" id="mobileNumber" name="mobileNumber">
            <br />
            <label>Telephone:</label>
            <input type="tel" id="telephoneNumber" name="telephoneNumber">
            <br />
            <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
            <input type="button" name="submit" value="Register" onclick="submitCheck();">
        </form>
        <script src="script.js"></script>
    </div>
</body>
</html>


登记
名字：




姓：




性别：
男性
女性
其他
宁愿不说



电邮：




确认电子邮件：


流动电话：


电话：

我的JavaScript：

function submitCheck() {
    var pass = false;
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var genderTest = document.getElementsByName("gender");
    var genderIf = false;
    for (var a = 0; a < genderTest.length; a += 1) {
        if (genderTest[a].checked) {
            genderIf = true;
        } 
    }
    var emailCheck = document.getElementById("email").value;
    if (firstName.length > 0) {
        document.getElementById("warning_first").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_first").innerHTML = "This is required!";
        pass = false;
    }
    if (lastName.length > 0) {
        document.getElementById("warning_second").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_second").innerHTML = "This is required!";
        pass = false;
    }
    if (genderIf) {
        document.getElementById("warning_third").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_third").innerHTML = "This is required!"
        pass = false;
    }
    if (emailCheck.length > 0) {
        document.getElementById("warning_fourth").innerHTML = "";
        pass = true;
    } else {
        document.getElementById("warning_fourth").innerHTML = "Your email is too short!";
        pass = false;
    }
    if (pass) {
        console.log("OK");
    } else {
        console.log("NO");
    }
}

函数submitCheck（）{
var pass=假；
var firstName=document.getElementById（“firstName”）.value；
var lastName=document.getElementById（“lastName”）.value；
var genderTest=document.getElementsByName（“性别”）；
var genderIf=假；
对于（变量a=0；a0）{
document.getElementById（“警告_优先”）.innerHTML=“”；
通过=正确；
}否则{
document.getElementById（“警告首先”）.innerHTML=“这是必需的！”；
通过=错误；
}
如果（lastName.length>0）{
document.getElementById（“警告秒”）.innerHTML=“”；
通过=正确；
}否则{
document.getElementById（“警告秒”）.innerHTML=“这是必需的！”；
通过=错误；
}
if（genderIf）{
document.getElementById（“第三次警告”）.innerHTML=“”；
通过=正确；
}否则{
document.getElementById（“警告第三”）.innerHTML=“这是必需的！”
通过=错误；
}
如果（emailCheck.length>0）{
document.getElementById（“warning_fourth”）.innerHTML=“”；
通过=正确；
}否则{
document.getElementById（“warning_fourth”）.innerHTML=“您的电子邮件太短了！”；
通过=错误；
}
如果（通过）{
控制台日志（“OK”）；
}否则{
控制台日志（“否”）；
}
}

如您所见，如果电子邮件为真，控制台将记录“OK”（我正在使用它来查看所有内容是否有效）。如何解决此问题，以便在只有电子邮件有效的情况下，它不会“传递”为真

由于@onsubmit出现问题，我使用的是普通按钮而不是提交按钮。

目前，如果有任何元素通过测试，您将默认

通过为假，并将其更改为真

颠倒你的逻辑
将默认值pass
设置为true
。如果任何元素未通过测试，则将其更改为false
。
很简单，在代码开始时，将pass变量的值更改为1，如下所示：
var pass = 1;

现在更改IF语句中包含pass变量的代码行。对于设置为true的条件：
pass *= 1;

这是一个错误的条件
pass *= 0;

这可以确保除非满足所有IF条件，否则pass变量不会返回true状态。
您应该这样做。如果其中没有for属性或表单控件，则标签是无用的。此外，当您有一组控件时，请将
与
一起使用（就像你的性别单选按钮，每个按钮都应该有自己的
）。我使用标签只是为了显示未验证的警告。我应该使用其他东西来代替它吗？