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

试试此演示： ==＆gt; http://jsfiddle.net/uP8Q2/

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

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

开始的两件事：

使用type=password〜＆gt; 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);
    }
});

Answer 2

如果您想在提交之前检查一下，可以按照以下方式进行检查

使用普通的Jquery：

<p>
<input type="text" name="NPassword" id="first" placeholder="New Password"/></p>
<input type="text" name="RNPassword" id="second" placeholder="Retype New Password"/>
<span id="error" class="hidden">Not Matched"</span>

然后：

编辑ONCHANGE

   $('#second').keyup(function(e){
           if($('#first').val() !== $('#second').val()){
                $('#error').removeClass('hidden');
                return false; 
           }else{
             $('#error').addClass('hidden');
           }
    });

http://liveweave.com/yVXnIF

如果您使用KnockoutJs或AngularJs，那么它们可以在模型中绑定验证。

验证密码和重新输入密码

2 个答案: