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

Validating Password and Retype Password

提问by user3522121

I am having two textboxes like this :

我有两个这样的文本框：

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

Now,what i want is that on every keypress of Retype New Password It should check if both are same or not.If yes then in green color display it on right side of RNPassword,Otherwise in red color display that both are not same and also disable the submit button of the page.How this can be done please help.

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

回答by Tats_innit

Try this demo: ==>http://jsfiddle.net/uP8Q2/

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

Another demo = http://jsfiddle.net/ALk9Z/

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

disable button demohttp://jsfiddle.net/K2Xdc/

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

2 things to start with:

2件事开始：

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

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

Also next time add your JS code with the post :)rest should fit the need.

下次添加您的 JS 代码与 post :)rest 应该满足需要。

code

代码

HTML

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

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

Disable button demo code

禁用按钮演示代码

 $('#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);
    }
});

回答by sir4ju1

If you want to check that before submit you can do that in following way

如果您想在提交之前检查，您可以通过以下方式进行

With plain Jquery:

使用普通的 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>

And then:

接着：

EDIT ONCHANGE

编辑更改

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

http://liveweave.com/yVXnIF

http://liveweave.com/yVXnIF

If you use KnockoutJs or AngularJs those have ability to bind verification in model itself.

如果您使用 KnockoutJs 或 AngularJs，则它们能够在模型本身中绑定验证。