javascript onsubmit 函数不适用于两个输入字段答案

【问题标题】：javascript onsubmit function not working for two input fieldsjavascript onsubmit 函数不适用于两个输入字段
【发布时间】：2014-04-24 19:58:59
【问题描述】：

我正在尝试在不使用 html5 验证作为课程练习的情况下验证表单，但我终其一生都无法弄清楚。

如果电子邮件和/或名称无效/为空，我希望弹出警告消息。

我已经到了警报将从电子邮件或名称字段中弹出的地步，这取决于 onsubmit 函数中的第一个。

任何想法将不胜感激！

document.getElementById("frmContact").onsubmit = function() {

    var inputEmail= document.getElementById("email").value,
        emailPattern = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$");
    if (inputEmail==="") {
        alert("Please enter your email.")
        return false;
    } else if (!emailPattern.test(inputEmail)){
        alert("Please enter a valid email address.");
        return false;
    } else {
        return true;
    };

    var inputName= document.getElementById("name").value,
        namePattern = new RegExp("^[A-Za-z]+$");
    if (inputName==="") {
        alert("Please enter your name.")
        return false;
     } else if (!namePattern.test(inputName)){
        alert("Please enter a valid name.");
        return false;
    } else {
    return true;
    };
};

【问题讨论】：

只要你return false，函数就结束了，所以剩下的就不执行了。如果您想提醒所有错误字段，请在所有提醒之后返回。

标签： javascript validation alert onsubmit

【解决方案1】：

你return 在第一个被验证之后，所以第二个字段永远不会被检查。取而代之的是，有一个局部变量默认设置为 true，并且设置为 false 的任何一个字段验证失败，并在最后返回它。

    var valid = true;
    // ...
    if(inputEmail==="") {
        alert("Please enter your email.");
        valid = false;
    // ...

    return valid;
};

【讨论】：

【解决方案2】：

也许这行不通，但这个概念可能是这样的......

document.getElementById("frmContact").onsubmit = function() {

    var inputEmail= document.getElementById("email").value,
        emailPattern = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"),
        error = [],
        i = 0;

    if (inputEmail==="") {
        error.push("Please enter your email");
    } else if (!emailPattern.test(inputEmail)){
        error.push("Please enter a valid email address.");
    } 

    var inputName= document.getElementById("name").value,
        namePattern = new RegExp("^[A-Za-z]+$");
    if (inputName==="") {
        error.push("Please enter your name.")
     } else if (!namePattern.test(inputName)){
        error.push("Please enter a valid name.");
    } 

    if(typeof error !== 'undefined' && error.length > 0){
        alert("you submit the form correctly");
    } else {
        for(i = 0; i < error.length; i + 1){
            alert(error[i]);
        }
    }
};

【讨论】：