javascript 检查密码是否相等 jQuery

Check if passwords are equal jQuery

提问by madsobel

I am trying to validate whether two entered passwords are the same or not. But I can't seem to get it working. No matter what values I enter in my input fields, the result is always "true". Can you see what I am doing wrong?

我正在尝试验证两个输入的密码是否相同。但我似乎无法让它工作。无论我在输入字段中输入什么值，结果始终为“真”。你能看出我做错了什么吗？

HTML:

HTML：

<div class="form-group" id="password">
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="form-group" id="repassword">
<input type="password" class="form-control" placeholder="Confirm Password" name="repassword">
</div>

jQuery:

jQuery：

    //Check if password is set
    $('input[name=password]').blur(function() {
        if($(this).val().length == 0){
            $('#password').addClass('has-error');
        } else {
            $('#password').addClass('has-success');
        }
    });
    //Check if repassword is set
    $('input[name=repassword]').blur(function() {
        if($(this).val().length == 0){
            $('#repassword').addClass('has-error');
        } else {
            $('#repassword').addClass('has-success');
        }
    });
    //Check if password and repassword are equal
    $('input[name=password]').blur(function() {
        if ($(this).attr('value') !== $('input[name=repassword]').attr('value')) {
            $('#password').addClass('has-error');
            $('#repassword').addClass('has-error');
        } else {
            $('#password').addClass('has-success');
            $('#repassword').addClass('has-success');
        }
    });

回答by imbondbaby

You should be using .val()to get the value of the textbox

您应该使用.val()来获取文本框的值

You could simplify the whole thing to this:

您可以将整个事情简化为：

$('input').blur(function() {
    var pass = $('input[name=password]').val();
    var repass = $('input[name=repassword]').val();
    if(($('input[name=password]').val().length == 0) || ($('input[name=repassword]').val().length == 0)){
        $('#password').addClass('has-error');
    }
    else if (pass != repass) {
        $('#password').addClass('has-error');
        $('#repassword').addClass('has-error');
    }
    else {
        $('#password').removeClass().addClass('has-success');
        $('#repassword').removeClass().addClass('has-success');
    }
});

DEMO

演示

You could use $('input').blur(function()instead, that way it will trigger on all inputs

您可以$('input').blur(function()改用，这样它将在所有输入上触发

回答by adeneo

You're never removing any of the classes, you have to remove them to make it work, otherwise css specificity will only show the styles for the most specific class

您永远不会删除任何类，您必须删除它们才能使其工作，否则 css 特异性将只显示最具体类的样式

It could all be written much simpler

一切都可以写得更简单

$('input[name=password], input[name=repassword]').on('change', function () {
    var password   = $('input[name=password]'),
        repassword = $('input[name=repassword]'),
        both       = password.add(repassword).removeClass('has-success has-error');

    password.addClass(
        password.val().length > 0 ? 'has-success' : 'has-error' 
    );
    repassword.addClass(
        password.val().length > 0 ? 'has-success' : 'has-error'
    );

    if (password.val() != repassword.val()) {
        both.addClass('has-error');
    }
});

FIDDLE

小提琴

回答by PeterKA

Use domElem.valueor $(domElem).val()to get the value of a formelement:

使用domElem.value或$(domElem).val()获取form元素的值：

WORKING JSFIDDLE DEMO

工作 JSFIDDLE 演示

$('input').on('input',function() {
    var pass = $('input[name=password]'),
        reps = $('input[name=repassword]'),
        pass_cont = $('#password'),
        reps_cont = $('#repassword');
     !$(this).is( '[name=password]' ) || $(function() {
         pass_cont.addClass( pass.val().length === 0 ? 'has-error' : 'has-success' )
         .removeClass( pass.val().length === 0 ? 'has-success' : 'has-error' );
     })();
     !$(this).is( '[name=repassword]' ) || $(function() {
         reps_cont.addClass( reps.val() === pass.val() ? 'has-success' : 'has-error' )
         .removeClass( reps.val() === pass.val() ? 'has-error' : 'has-success' );
     })();
});

回答by j08691

It should be $(this).val(), not $(this).attr('value'). And check both fields when either is blurred:

应该是$(this).val()，不是$(this).attr('value')。并在任一字段模糊时检查两个字段：

$('input').blur(function () {
    if ($('input[name=password]').val() != $('input[name=repassword]').val()) {
        $('#password').removeClass().addClass('has-error');
        $('#repassword').removeClass().addClass('has-error');
    } else {
        $('#password').removeClass().addClass('has-success');
        $('#repassword').removeClass().addClass('has-success');
    }
});

jsFiddle example

jsFiddle 示例

回答by shanet

In addition to what the others have said about using val()to get the value of the element instead of attr('val')(which could be derived from the HTML), the example also didn't work because:

除了其他人所说的val()用于获取元素的值而不是attr('val')（可以从 HTML 派生）之外，该示例也不起作用，因为：

• You need to remove the has-errorand has-successclass before adding one or the other
• You are checking the value of the second password field onblurof the first one. It seems like you should compare the two in one event handler as in adeneo's answer.

• 在添加一个或另一个之前，您需要删除has-error和has-success类
• 您正在检查onblur第一个密码字段的第二个密码字段的值。似乎您应该像在 adeneo 的回答中那样将两者在一个事件处理程序中进行比较。