Question

当我的脚本验证填写完的表单时，它会一次检查一个错误，而不是一次检查所有错误。我知道这是因为我使用if语句，当参数验证为True时，这些语句显然会停止。

如何调整我的脚本以便一次性向最终用户显示所有错误？我是否使用continue声明？或者有更好的方法吗？

function checkForm() {
            if (!retext.test(document.myform.sport.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                return false;
            }

            else if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                return false;
            }

            else if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                return false;
            }
        }

<form name="myform" method="POST" action="http://youtube.com" onsubmit="return checkForm()">
        <fieldset>
            <legend>Hi</legend>
            <label>Random text: </label>
            <input type="text" name="textfield">
            <div id="text"></div>
            <label>Email: </label>
            <input type="email" name="email">
            <div id="emailwarn"></div>
            <label>Tel: </label>
            <input type="tel" name="tel" maxlength="11">
            <div id="telwarn"></div>
            <input type="submit" value="Submit Form">
            <input type="reset" value="Reset Form">
        </fieldset>
    </form>

Answer 1

您需要让checkForm函数运行所有检查，并且只返回一个（最后）。

例如

function checkForm() {
    var valid = true;

    if (!retext.test(document.myform.sport.value)) {
        document.myform.textfield.style.border = "3.5px solid red";
        document.getElementById("text").innerHTML = "Invalid text.";
        document.getElementById("text").style.display = "block";
        valid = false;
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    }

    return valid;
}

Answer 2

设置一个返回值并在结尾处返回。

function checkForm() {
        var valid = true;
        if (!testcondition) {
            // do stuff
            valid = false;
        }

        if (!othertestcondition) {
            // do stuff
            valid = false;
        }

        return valid;
    }

Answer 3

function checkForm() {
    var ok = true;
            if (!retext.test(document.myform.sport.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                ok =false;
            }

            if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                ok =false;
            }

            if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                ok = false;
            }
            return ok;
        }

JavaScript：一次验证表单

3 个答案: