键入时检查密码匹配

Question

我有一个带有"密码"和"确认密码"输入字段的注册表.我想检查"确认密码"是否与用户输入密码时的"密码"匹配并给出相应的消息.所以我试着这样做:

这是HTML:

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

这是checkPasswordMatch()函数:

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

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

只有当用户离开该字段时,才会在键入时验证.

我试图使用onKeyUp而不是onChange - 也没用.

那怎么办呢？

谢谢!

Answer 1

在你的onChange事件中可能是无效的语法,我避免像这样使用(在html中),因为我觉得它很混乱,并且很难在最好的时候保持JavaScript整洁.

我宁愿在javascript中在文档就绪事件上注册该事件.如果您希望在用户输入时进行验证,您也肯定也想使用keyup事件:

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

这是一个有效的例子

我个人更喜欢在密码字段更改时进行检查,如果他们重新键入原始密码,那么您仍然可以获得相同的验证检查:

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

这是一个有效的例子

Answer 2

这是一个有效的jsfiddle

http://jsfiddle.net/dbwMY/

注意事项:

• 验证document.ready函数中绑定的事件处理程序 - 否则在加载JS时输入将不存在
• 使用keyup

在说,验证是一个已解决的问题,有一些实现此功能的框架.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

我建议使用其中一个,而不是为你编写的每个应用程序重新实现验证.

Answer 3

$(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val()
            ? "Passwords match."
            : "Passwords do not match!"
        );
    });
});?

在这里演示