JavaScript表单验证第二条if语句不起作用

我开始简单的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;
    }
}

函数验证（）{
/*电子邮件验证*/
var changeColor=document.getElementById（“电子邮件”）；
var error1=document.getElementById（“error1”）；
var email1=document.loginForm.email；
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
如果（！重新测试（email1.value））{
changeColor.style.border=“2px纯红色”；
error1.style.display=“块”；
返回false；
}
/*密码字段的字段检查为空*/
var pas=document.getElementById（“密码”）；
var error3=document.getElementById（“error3”）；
var password=document.loginForm.password；
如果（password.value==“”）{
pas.style.border=“2px纯红”；
error3.style.display=“块”；
返回false；
}
}

请帮我解决这个问题

---

注意：我想学习“在键入JavaScript进行验证时”。我还没有找到任何合适的教程或干燥剂。

您使用的是

返回false

，因此第二次验证不起作用

试试这个：

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

---

检查[jquery validation demo]（），如果第一个有效，它返回false，那么第二个

If

显然永远不会到达。如果您希望能够同时显示多条错误消息，则应使用不同的方法（例如，检查Rajesh answer）。@dfsq it work。谢谢