javascript - 验证密码并重新输入密码

Question

我有两个这样的文本框:

<p>
<input type="text" name="NPassword" placeholder="New Password"/></p>
<input type="text" name="RNPassword" placeholder="Retype New Password"/>

现在，我想要的是，在每次按下重新输入新密码时，它应该检查两者是否相同。如果是，则以绿色显示它在 RNPassword 的右侧，否则以红色显示，两者都不相同同样，也禁用页面的提交按钮。如何做到这一点，请帮忙。

Answer 1

试试这个演示:==> http://jsfiddle.net/uP8Q2/

另一个演示 = http://jsfiddle.net/ALk9Z/

禁用按钮演示 http://jsfiddle.net/K2Xdc/

从两件事开始:

• 使用type=password ~> http://www.w3.org/TR/html-markup/input.password.html
• 使用.keyup() API:http://api.jquery.com/keyup/

下次还可以在 :) 后面添加 JS 代码，其余的应该可以满足需要。

代码

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>

JS

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

禁用按钮演示代码

 $('#hulk').prop('disabled' , true);
$('#txtConfirmPassword').on('keyup', function () {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword) {
        $("#divCheckPassword").html("Passwords do not match!");
    } else {
        $("#divCheckPassword").html("Passwords match.");
        $('#hulk').prop('disabled' , false);
    }
});