Одиночное предложение else для нескольких предложений if - javascript

Question

Во-первых: я новичок в JavaScript. Итак ... У меня есть базовая форма с паролем, повторный пароль, адрес электронной почты и поля повторного адреса электронной почты. Я хочу проверить, равен ли пароль повторному паролю. Если это не так, появляется предупреждающее сообщение и страница перезагружается. То же самое для электронной почты и повторной электронной почты. НО, если пароль для передачи и повторения не совпадает, а электронная почта и повторная электронная почта не равны, появляется первое предупреждающее сообщение, затем второе сообщение (на этот раз для электронной почты) появляется слишком быстро. Я хочу показать только одно предупреждение, когда оба поля не совпадают.

<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>

И форма:

<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>

Answer 1

Одним из решений было бы разделить проверку на отдельные методы, а затем запустить вторую проверку только в случае успеха первого.

Вот пример:

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

Answer 2

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

Я верю, что это то, что вы хотите.

Answer 3

Вы можете просто вернуться из условий 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. Недостатком является то, что у вас есть несколько точек возврата, которые могут сбивать с толку - это сильно зависит от длины функции.

EDIT

Обновлен порядок блоков if

Answer 4

if ...
else if ...
else if ...
...
else ...

Вот как это должно быть структурировано. Вы можете иметь столько else if, сколько хотите.