Проверка совпадения пароля возвращает «Пароли совпадают», когда оба поля пусты

Question

Я делаю регистрационную форму и хочу проверить, есть ли у пользователя совпадающие пароли, пока он печатает, и дать ему соответствующее сообщение. Пока все работает, кроме этих вещей:

• Когда пользователь удаляет все из поля подтверждения пароля, он все еще дает ему сообщение «Пароли не совпадают», а я хочу дать ему нет сообщения или сообщения «Пожалуйста, подтвердите пароль».
• Когда Пользователь удаляет все из обоих полей, он дает ему сообщение «Пароли совпадают», в то время как это вообще не должно давать ему сообщения.

Вот мой код:

$(function () {
   $("#txtNewPassword").keyup(checkPasswordMatch);
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});


function checkPasswordMatch() {
    $("#divCheckPasswordMatch").html("");
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password == "" && confirmPassword == ""){
        $("#divCheckPasswordMatch").html("");
        $("#divIsPasswordExist").html("");
    }
    else if (password != "" && confirmPassword == "") {
        $("#divCheckPasswordMatch").html("");
    }

    else if (password == "" && confirmPassword != "")
        $("#divIsPasswordExist").html("Password cannot be empty!");
    else
        $("#divIsPasswordExist").html("");


    if (password != confirmPassword)
    {
        $("#divCheckPasswordMatch").removeClass("registrationFormConfirm");
        $("#divCheckPasswordMatch").addClass("registrationFormAlert");
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    }
    else
    {
        $("#divCheckPasswordMatch").removeClass("registrationFormAlert");
        $("#divCheckPasswordMatch").addClass("registrationFormConfirm");
        $("#divCheckPasswordMatch").html("Passwords match.");
    }
}

Есть идеи, пожалуйста? Спасибо!

Answer 1

Это потому, что if (password != confirmPassword) является ложным, потому что оба в любом случае пусты, когда вы устанавливаете var password = $("#txtNewPassword").val(); и var confirmPassword = $("#txtConfirmPassword").val();, они оба равны друг другу.Вы должны добавить возврат после того, как проверите, являются ли значения пустыми, поэтому, когда пользователь удаляет текст, он не будет ничего проверять ниже первого оператора проверки.

// первая проверка

if (password == "" && confirmPassword == ""){
return false;
}

... остаток кода

Answer 2

Есть более элегантный способ сделать это. Измените ваши условия на это

if(password.length > 0 && confirmPassword.length >0) {
    if(password == confirmPassword) {
        //confirmed
    } else {
       // not confirm
    }

} else {
   //not entered
}

Answer 3

......
        if (password == "" && confirmPassword == ""){
            $("#divCheckPasswordMatch").html("");
            $("#divIsPasswordExist").html("Password and Confirm Password dosen't exists");
            return;
        }
        else if (password != "" && confirmPassword == "") {
            $("#divCheckPasswordMatch").html("Confirm Password dosent't exists");
            return;
        }
        else if (password == "" && confirmPassword != ""){
            $("#divIsPasswordExist").html("Password cannot be empty!");
            return;
        }
        else{
            $("#divIsPasswordExist").html("");
        }
        if (password != confirmPassword)
        {
            $("#divCheckPasswordMatch").removeClass("registrationFormConfirm");
            $("#divCheckPasswordMatch").addClass("registrationFormAlert");
            $("#divCheckPasswordMatch").html("Passwords do not match!");
        }
        else
        {
            $("#divCheckPasswordMatch").removeClass("registrationFormAlert");
            $("#divCheckPasswordMatch").addClass("registrationFormConfirm");
            $("#divCheckPasswordMatch").html("Passwords match.");
        }
.........

Answer 4

if (password == "" && confirmPassword == ""){
    return false;
}
    ....
    ....

if(confirmPassword != "")
    $("#txtConfirmPassword").html("Please confirm password");

        if (password != confirmPassword)
        {
            $("#divCheckPasswordMatch").removeClass("registrationFormConfirm");
            $("#divCheckPasswordMatch").addClass("registrationFormAlert");
            $("#divCheckPasswordMatch").html("Passwords do not match!");
        }
        else
        {
            $("#divCheckPasswordMatch").removeClass("registrationFormAlert");
            $("#divCheckPasswordMatch").addClass("registrationFormConfirm");
            $("#divCheckPasswordMatch").html("Passwords match.");
        }

 ...
 ...