Jquery驗證器確認密碼問題

Question

我正在嘗試使用jquery驗證器進行驗證。第一次，每件事情都很好。

但是，從第二次，沒有密碼字段改變任何事情，如果我去確認密碼部分，密碼最好會顯示錯誤，但同時確認密碼也呈現出錯誤，"confirm password not matches to password."

確認只有在輸入與密碼不匹配的錯誤密碼後，密碼纔會顯示錯誤。

是否有解決此問題的方法或者是否需要編寫自己的自定義方法來擴展驗證方法。

這是我的嘗試：

$(document).ready(function(){ 
 
$("#cp").validate(validateChangePswrdForm("changePasswordForm")); 
 
}); 
 
var validateChangePswrdForm = function() { 
 
    var that = this; 
 
    return { 
 
     rules: { 
 
      password: { 
 
       required: true, 
 
       minlength: 8, 
 
      }, 
 
      confirmpassword: { 
 
       equalTo: "#password" 
 
      } 
 
     }, 
 
     messages: { 
 
      password: { 
 
       required: "password is required", 
 
       minlength: 5 
 
      }, 
 
      confirmpassword: { 
 
       required: "confirm password is required", 
 
       minlength: 5 
 
      } 
 
     }, 
 
     submitHandler: function(fId, evt) { 
 
      var serForm = $(fId).serialize(); 
 
      changepassword(fId, evt) 
 
     } 
 
    } 
 
}; 
 

 
var changepassword = function(){ 
 
alert('Validated'); 
 
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="cp"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-8 col-md-8 col-sm-7"> 
 
       <form method="post" role="form" autocomplete="off" name="changePasswordForm" id="changePasswordForm"> 
 
        <div class="alert alert-danger changepassword-error hidden"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="password">password</label> 
 
         <input type="password" class="form-control" name="password" id="password" placeholder="password"> 
 
        </div> 
 
        <div class="form-group reg-form col-sm-7 padLeft"> 
 
         <label for="confirmpassword">Confirm Password</label> 
 
         <input type="password" class="form-control noradius" name="confirmpassword" id="confirmpassword" placeholder="Confirm Password"> 
 
        </div> 
 
        <div class="btn-toolbar"> 
 
         <button type="submit" class="btn">Submit</button> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

您的代碼：

$("#cp").validate(.... 

首次每一件事工作正常

它根本無法工作。如果您將.validate()方法附加到<div>（id="cp"），則不會發生任何情況。要初始化插件，只能將此方法附加到<form>元素。

此外，您不能將兩個參數傳遞到submitHandler函數。僅指定處理代表form對象的一個​​參數。

而messages對象中的值只能包含表示自定義錯誤消息的字符串。您爲從未聲明的規則以及不是字符串的值定義了消息。

這是工作：

$(document).ready(function() { 

    $("#changePasswordForm").validate({ 
     rules: { 
      password: { 
       required: true, 
       minlength: 8, 
      }, 
      confirmpassword: { 
       equalTo: "#password" 
      } 
     }, 
     messages: { 
      password: { 
       required: "password is required", 
       // minlength: 5 // <- this must be a string! 
      }, 
      confirmpassword: { 
       required: "confirm password is required", 
       // minlength: 5 // <- this must be a string! 
      } 
     }, 
     submitHandler: function(fId) { 
      var serForm = $(fId).serialize(); 
      changepassword() 
     } 
    }); 

}); 

var changepassword = function() { 
    alert('Validated'); 
}; 

DEMO：http://jsfiddle.net/eqouszsw/