javascript - 提交前如何确认一切是否有效？

问题描述

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

我有几个'if' 检查表单，如果它有效，他们将变量（'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");
    }
}

如您所见，如果电子邮件为真，则控制台将记录“OK”（我用它来查看一切是否有效）。我该如何解决这个问题，以便它不会“传递”为真，如果只是电子邮件有效吗？

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

标签： javascripthtmlforms

目前，如果任何元素通过测试，您默认并将其更改为pass。falsetrue

颠倒你的逻辑。

将默认值设置pass为true。false如果任何元素未通过测试，请将其更改为。

javascript - 提交前如何确认一切是否有效？

问题描述

解决方案

推荐阅读