javascript - 当密码值为空时如何禁用消息

Question

我正在做密码匹配概念，当我在其中输入密码时，它工作正常，并且显示“密码匹配”或“密码不匹配”。但这就是问题或者可以说是bug之类的事情。当您的密码匹配，然后突然删除框中的两个密码时，它仍然显示“密码匹配”或“密码不匹配”。为了更好地理解，我发布了一张图片。

当两个密码框中的密码均为空时，如何隐藏或删除“密码不匹配或密码匹配”注释。我在下面发布了我所做的代码

HTML

<p>
    <input type="password" name="NPassword" placeholder="New Password" id="txtNewPassword" />
</p>
<input type="password" name="RNPassword" placeholder="Retype New Password" id="txtConfirmPassword" onChange="isPasswordMatch();" />
<div id="divCheckPassword"></div>

JavaScript

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

    if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!");
    else $("#divCheckPassword").html("Passwords match.");


}

$(document).ready(function () {
    $("#txtConfirmPassword").keyup(isPasswordMatch);
});

Answer 1

您应该添加一个测试来检查密码字段是否为空。

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

    if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!");
    else if ((password ==  "") || (confirmPassword == "")) $("#divCheckPassword").html("Please fill both password fields"); 
    else $("#divCheckPassword").html("Passwords match.");


}

$(document).ready(function () {
    $("#txtConfirmPassword").keyup(isPasswordMatch);
});

或者使用 $("#divCheckPassword").html(""); 而不是 $("#divCheckPassword").html("请填写两个密码字段"); 清除消息。