如何检查确认密码字段的形式，而不需要刷新页面

问题描述

我有一个项目中，我必须添加一个登记表，我想，以验证密码和确认字段等于没有点击注册按钮。

I have a project in which I have to add a registration form and I want to to validate that the password and confirm fields are equal without clicking the register button.

如果密码和确认密码字段不匹配的话，我也想提出一个错误信息，在确认密码字段，并禁止注册按钮的边上。

If password and confirm password field will not match, then I also want to put an error message at side of confirm password field and disable registration button.

下面是我的html code ..

following is my html code..

<form id="form" name="form" method="post" action="registration.php">
    <label >username :
<input name="username" id="username" type="text" /></label> <br>
    <label >password :
<input name="password" id="password" type="password" /></label>
    <label>confirm password:
<input type="password" name="confirm_password" id="confirm_password" />
    </label>
<label>
  <input type="submit" name="submit"  value="registration"  />
</label>

有没有办法做到这一点？感谢您事先的任何帮助。

Is there any way to do this? Thanks in advance for any help.

推荐答案

您需要一个的onkeyup 函数添加到您的确认密码字段。

You need to add an onkeyup function to your confirm password field.

在这样的时候，你会卡出了场，你就会知道，如果密码是相同或不

In this way when you will tab out of the field you will know if the password is same or not

<label>password :
    <input name="password" id="password" type="password" />
</label>
<br>
<label>confirm password:
    <input type="password" name="confirm_password" id="confirm_password" /> <span id='message'></span>


$('#confirm_password').on('keyup', function () {
    if ($(this).val() == $('#password').val()) {
        $('#message').html('matching').css('color', 'green');
    } else $('#message').html('not matching').css('color', 'red');
});

下面的jsfiddle链接 http://jsfiddle.net/F6sEv/

jsfiddle link here http://jsfiddle.net/F6sEv/

干杯，希望这有助于！

更新

据@kdjernigan的建议，我更新了code，包括一个情况下，当检查确认密码后，密码修改完毕。

According to the suggestion of @kdjernigan I am updating the code to include a case when the password changes after the check for confirm password is completed.

$('#password, #confirm_password').on('keyup', function () {
    if ($('#password').val() == $('#confirm_password').val()) {
        $('#message').html('Matching').css('color', 'green');
    } else
        $('#message').html('Not Matching').css('color', 'red');
});

和这里是小提琴： http://jsfiddle.net/F6sEv/53/

这篇关于如何检查确认密码字段的形式，而不需要刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！