密码为空时如何禁用消息

Question

我正在执行密码匹配的概念，当我在其中输入密码时，它工作正常，它显示“密码匹配”或“密码不匹配”。 但是这里有问题或可以说是臭虫之类的东西。 当您的密码匹配时，突然您在框中删除了两个密码，它仍然显示“密码匹配”或“密码不匹配”。 我张贴的图片是为了更好的理解。

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

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

添加检查以检查密码文本框是否为空或已填充。 如果文本框为空，请清除divCheckPassword

Answer 2

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

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("Please fill both password fields"); 清除消息。

Answer 3

只需首先检查input是否为空。

 function isPasswordMatch() { var password = $("#txtNewPassword").val(); var confirmPassword = $("#txtConfirmPassword").val(); if(password =='' || confirmPassword=='') $("#divCheckPassword").html(''); else if(password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!"); else $("#divCheckPassword").html("Passwords match."); } $(document).ready(function () { $("#txtConfirmPassword").keyup(isPasswordMatch); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 4

此代码用于在您首先删除密码，然后再次确认密码或反之亦然时隐藏消息。

 function isPasswordMatch() { var password = $("#txtNewPassword").val(); var confirmPassword = $("#txtConfirmPassword").val(); if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!"); else $("#divCheckPassword").html("Passwords match."); if ((password == "") && (confirmPassword == "")) $("#divCheckPassword").hide(); if ((confirmPassword == "") && (password == "")) $("#divCheckPassword").hide(); } $(document).ready(function () { $("#txtNewPassword").keyup(isPasswordMatch); $("#txtConfirmPassword").keyup(isPasswordMatch); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>