Question

我正在开始简单的JavaScript表单验证。我写了两个语句，第一个如果语句运行良好，但第二个不是。但是这两个 if 语句单独工作。我不明白我错了。这是HTML代码：

<form id="loginForm" name="loginForm" method="post" action="my-profile.html">
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" id="eMail" placeholder="abcde00@example.com" class="form-control" required="required" />
        <span class="erRor" id="error1">Please input valid email address</span>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" placeholder="Password" name="password" id="pasSword" class="form-control" required="required" />
        <span class="erRor" id="error2">Invalid email and password</span>
        <span class="erRor" id="error3">This field should not be empty</span>
    </div>
    <div class="form-group">
        <button type="submit" onclick="return validate();">Login</button>
    </div>
</form>

这里的JavaScript代码：

function validate(){
    /* email validation */
    var changeColor = document.getElementById("eMail");
    var error1 = document.getElementById("error1");
    var email1 = document.loginForm.email;
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(!re.test(email1.value)){
        changeColor.style.border = "2px solid red";
        error1.style.display = "block";
        return false;
    }

    /* empty fild check for password field */

    var pas = document.getElementById("pasSword");
    var error3 = document.getElementById("error3");
    var password = document.loginForm.password;
    if(password.value === ""){
        pas.style.border = "2px solid red";
        error3.style.display = "block";
        return false;
    }
}

请帮我解决这个问题。

注意：我想学习“ AS YOU TYPE JavaScript for validation ”。我没有找到任何适当的教程或干燥。

Answer 1

您正在使用return false，因此第二次验证无效。

试试这个：

var valid = true;
if(conditoin_one){
    valid = false;
    // update error element
}
if(conditoin_two){
    valid = false;
    // update error element
}
return valid;

JavaScript表单验证第二，如果语句不起作用

1 个答案: