Javascript:验证多个密码并确认密码字段

Question

请帮忙，如果密码不相等，我该如何验证这个多重密码并确认密码？如果第一个 judge_password[] 和 juge_conPassword[] 不相等返回 false 然后再次迭代到下一个。

<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 

<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 

<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 
<input type="button" id="click">

我的代码

var judge_conPassword = [];

$('.judge_conPassword').each(function(){
    var theVal = $(this).val();
    if($.trim($(this).val())==''){
        pralse = false;
        $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
        $('#palitan_ng_text').html('Confirm password required');
        return false;
    }
    judge_conPassword.push(theVal );
});



var judge_password = [];

$('.judge_password').each(function(){
    var theVal = $(this).val();
    if($.trim($(this).val())==''){
        pralse = false;
        $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
        $('#palitan_ng_text').html('Password cannot be empty');
        return false;
    }
    judge_password.push(theVal);
});

if(!pralse){
    return false;
}

function checkPass(judge_password, judge_conPassword){
    if(judge_password.length !== judge_conPassword.length){
        alert('password missing')
    }else{
        var j_count = judge_password.length;
        for(var i=0; i<j_count; i++){
            if(judge_password[i] !== judge_conPassword[i]){
                alert('Password not same');
                return false;
            }
        }
                return true;
    }

}
checkPass();

Answer 1

编辑:请注意，我在看到将 JS 添加到问题的编辑之前发布了这个答案，所以我只是离开了 OP 的 HTML。

这是我想到的第一种方式。我添加了一个 mismatch 类来突出显示有问题的字段:

$("#click").click(function() {
  var passwords = $("input.judge_password").removeClass("mismatch"),
      confirms = $("input.judge_conPassword").removeClass("mismatch"),
      valid = true;
  
  passwords.each(function(i) {
    if (this.value != confirms[i].value) {
      valid = false;
      $(this).add(confirms[i]).addClass("mismatch");
    }
  });
  
  if (!valid) {
    alert("Passwords don't match.");
  } else {
    // submit or whatever here
    alert("Passwords match.");
  }
});

.mismatch {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 
<br><br>
<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 
<br><br>
<input type="password" name="judge_password[]" class="judge_password"> 
<input type="password" name="judge_conPassword[]" class="judge_conPassword"> 
<br><br>
<input type="button" id="click" value="Test">