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

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

2 个答案: