检查密码是否相等jQuery

我想验证两个输入的密码是否相同。但我似乎无法得到它的工作。无论我在输入字段中输入什么值，结果总是“真”。你能看到我做错了什么吗？检查密码是否相等jQuery

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：

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

来源

2014-07-08 madsobel

是否有理由将这些操作分开绑定？ – circusdei

你正在使用'val（）'，所以你知道它存在，但出于某种原因，你突然决定使用'attr（'value'）'，为什么？ – adeneo

请告诉我你也有服务器代码，也检查。对密码客户端做任何事情都是可怕的。 – asawyer

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

您可以简化整个事情到这一点：

$('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

你可以使用$('input').blur(function()代替，这样它会触发所有输入

来源

2014-07-08 20:56:05 imbondbaby

非常感谢。这是一个无意的错误，不是在一次函数中指定整个事物。 – madsobel

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

WORKING JSFIDDLE DEMO

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

来源

2014-07-08 20:53:25 PeterKA

+1这是你应该如何去做的。 – Darren

@Darren，谢谢。我会记住这一点。 :) – PeterKA

它应该是$(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

来源

2014-07-08 20:53:26 j08691

你永远消除任何类的，你要删除它们，使其工作，否则CSS具体只会显示样式最具体的类

它可以被写到磁盘上要简单得多

$('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

来源

2014-07-08 20:59:33 adeneo

哇，我不知道你可以使用'removeClass'去除两个类 - 你不会期望基于这个名字。好的，可读的答案。（尽管OP的错误的本质是不使用'val（）'） – shanet

除了什么其他人所说的关于使用val()来获取元素，而不是attr('val')（这可以从HTML导出）的值，这个例子也没有工作，因为：

您需要删除has-error和has-success类，然后再添加一个或另一个
您正在检查第一个密码字段onblur的值。好像你应该在一个事件处理程序中比较两个，就像在adeneo的答案中一样。

来源

2014-07-08 21:03:48 shanet

检查密码是否相等jQuery

回答

相关问题