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/