用于多个if子句的单个else子句-javascript

第一：我是JavaScript新手。 所以我有密码，重复密码，电子邮件和重复电子邮件字段的基本形式。我想检查密码是否等于重复密码。如果不是，则会显示警告消息并重新加载页面。相同的电子邮件和重复电子邮件。 但是，如果pass和repeat password不相等，并且email和repeat email不相等，则会显示第一条警报消息，然后第二条消息（这次是email）显示得太快。当两个字段不匹配时，我只想显示一条警报消息

<script type="text/javascript">

           function checkFields() {
            var pass= document.getElementById('password');
            var reppass= document.getElementById('reppass');

            var email= document.getElementById('email');
            var repemail= document.getElementById('repemail');

            if (pass.value != reppass.value) {
               alert('Passwords dont match');
               window.location.reload();
            }

            if (email.value != repemail.value) {
                alert('Emails dont match');
                window.location.reload();
            }                   

            else if (pass.value != reppass.value && email.value != repemail.value) {
                alert('Both fields dont match');
                window.location.reload();
            }

        }   

  </script>

函数checkFields（）{
var pass=document.getElementById（'password'）；
var reppass=document.getElementById（'reppass'）；
var email=document.getElementById（'email'）；
var repemail=document.getElementById（'repemail'）；
if（pass.value！=reppass.value）{
警报（“密码不匹配”）；
window.location.reload（）；
}
if（email.value！=repemail.value）{
提醒（“电子邮件不匹配”）；
window.location.reload（）；
}                   
else if（pass.value！=reppass.value&&email.value！=repemail.value）{
警报（“两个字段不匹配”）；
window.location.reload（）；
}
}   

及表格:

<form onSubmit="checkFields()">
<p><label>Password:</label> <input name="password" id="password" required="true" type="password" /></p>
<p><label>Repeat password:</label> <input name="reppass" id="reppass" required="true" type="password" /></p> 
<p><label>Email:</label> <input name="email" id="email" required="true" type="email" /></p>
<p><label>Repeat Email:</label> <input name="repemail" id="repemail" required="true" type="email" /></p>
<p><input type="submit" value="Send"></p> 
</form>

密码：

重复密码：

电邮：

重复电子邮件：

这就是它的结构。如果您喜欢，您可以拥有任意数量的

else

if( condition1 ) {
}else if( condition2 ) {
}else{
    …
}

我相信这就是您想要的。
您可以简单地从以下if子句返回：

function checkFields() {
    var pass = document.getElementById('password');
    var reppass = document.getElementById('reppass');

    var email = document.getElementById('email');
    var repemail = document.getElementById('repemail');

    if (pass.value != reppass.value && email.value != repemail.value) {
        alert('Both fields dont match');
        window.location.reload();
    }

    if (pass.value != reppass.value) {
        alert('Passwords dont match');
        window.location.reload();
        return;
    }

    if (email.value != repemail.value) {
        alert('Emails dont match');
        window.location.reload();
        return;
    }

}

我喜欢这种风格，因为它可以防止嵌套if子句。缺点是，有多个返回点可能会让人感到困惑——这在很大程度上取决于函数的长度

编辑

if块的更新顺序一个解决方案是将验证分解为单独的方法，然后仅在第一个验证成功时运行第二个验证

下面是一个例子：

var FormValiditor = function() {
    var pass = document.getElementById('password');
    var reppass = document.getElementById('reppass');
    var email = document.getElementById('email');
    var repemail = document.getElementById('repemail');

    return {
        checkFields: function() {
            if(checkPassword()){
             return checkEmail();   
            }
            return false;
        },
        checkPassword: function() {
            if (pass.value != reppass.value) {
                alert("Password don't match");
                return false;
            }
            return true;
        },
        checkEmail: function() {
            if(email.value != repemail.value){
              alert("Emails do not match");
              return false  
            }
            return true
        }
    }
}();

然后，如果您正在使用jQuery（您应该这样做！），那么可以在提交表单时运行验证

$（'form'）.submit（FormValidator.checkFields）
这个答案的问题是，第三条if语句的计算结果永远不会为true，因为您已经在检查这些值，然后返回。第三条语句不应该先出现吗？这样，如果它发现两者都不匹配，它会返回该值吗？
var FormValiditor = function() {
    var pass = document.getElementById('password');
    var reppass = document.getElementById('reppass');
    var email = document.getElementById('email');
    var repemail = document.getElementById('repemail');

    return {
        checkFields: function() {
            if(checkPassword()){
             return checkEmail();   
            }
            return false;
        },
        checkPassword: function() {
            if (pass.value != reppass.value) {
                alert("Password don't match");
                return false;
            }
            return true;
        },
        checkEmail: function() {
            if(email.value != repemail.value){
              alert("Emails do not match");
              return false  
            }
            return true
        }
    }
}();