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

Question

我试图在不使用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;
    };
};

Answer 1

您在第一个字段通过验证后return ，因此从不检查第二个字段。 取而代之的是，将一个局部变量默认设置为true，然后将两个字段中的任何一个均设置为false失败验证，然后在最后将其返回。

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

    return valid;
};

Answer 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]);
        }
    }
};