验证密码和重新输入密码

Question

我有两个这样的文本框:

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

现在,我想要的是在Retype New Password的每个按键上它应检查两者是否相同.如果是,则以绿色显示在RNPassword的右侧,否则在红色显示中两者都不相同也是禁用页面的提交按钮.如何做到这一点,请帮助.

Answer 1

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

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

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

2件事要开始:

• 使用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);
    }
});