提交前如何确定一切是否有效？

Question

我有一个 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”（我用它来查看一切是否有效”）。我该如何解决这个问题，以便它不会“传递”到 true，如果只是电子邮件有效吗？

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

Answer 1

目前，如果有任何元素通过测试，则默认pass为false并将其更改为true 。

颠倒你的逻辑。

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

Answer 2

很简单，在代码的开头将传递变量更改为 1，如下所示：

var pass = 1;

现在更改您拥有 pass 变量的 IF 语句中的代码行。 对于设置为这样的真实条件：

pass *= 1;

对于这个错误的条件

pass *= 0;

这确保除非满足所有 IF 条件，否则您的传递变量不会返回真实状态。

提交前如何确定一切是否有效？

问题描述

2 个解决方案

解决方案1
4 已采纳 2020-02-13 11:53:44

解决方案2
2 2020-02-13 12:00:50

提交前如何确定一切是否有效？

问题描述

2 个解决方案

解决方案1 4 已采纳 2020-02-13 11:53:44

解决方案2 2 2020-02-13 12:00:50

解决方案1
4 已采纳 2020-02-13 11:53:44

解决方案2
2 2020-02-13 12:00:50