关于jquery.validate.js的使用心得

前几天使用jquery.validate.js做一个注册的验证，里面有ajax验证的东西，有一点小心得，跟大家分享一下

，jquery.validate.js还是蛮好用的，其中也有对ajax验证的功能。

像注册的时候验证用户名是否重复和验证码时是用得上的，但是发现它对验证码的验证是不完美的。

validate对remote的验证原理是，有一个pengdding值来记录你的ajax验证，如果有pengdding值，它会认为有ajax验证，所以不会提交。

对于remote验证不完美的地方，就在于它的验证触发方式

同时对于ajax验证，它的处理方式是，第一次采用blur事件验证，也就是说，第一次进入输入框以后，是以blur事件触发的，后面的验证则是以每一次键入就验证一次的方式来做的，在这里为了防止一些不必要的请求，validate有一个逻辑，它认为你第一次输入正确以后，如果你不改变你的输入值，那么它认为你的输入是正确的，但是对于验证码的验证来说，输入是可以不变的，但是可以改变验证码的值，这样就会出现一个逻辑性的错误，在你对验证码输入正确的之后，然后你点击验证码改变验证码的值，但是你不改变你的输入值，那么你提交时，validate会认为依旧是正确的，这样就有错误了。造成这种逻辑错误的原因是源码中的这些代码：

 remote: function(value, element, param) {
   if ( this.optional(element) )
    return "dependency-mismatch";
   
   var previous = this.previousValue(element);
   
   if (!this.settings.messages[element.name] )
    this.settings.messages[element.name] = {};
   this.settings.messages[element.name].remote = typeof previous.message == "function" ? previous.message(value) : previous.message;
   
   param = typeof param == "string" && {url:param} || param;
   
   if ( previous.old !== value ) {//就是这句了，如果你不修改，remote方式将不再进行验证，而这个值则是存到元

//素data上的一个属性的值,所以如果对这个值在提交之前做一个处理的话，就会继续验证了
    previous.old = value;
    var validator = this;
    this.startRequest(element);
    var data = {};
    data[element.name] = value;
    $.ajax($.extend(true, {
     url: param,
     mode: "abort",
     port: "validate" + element.name,
     dataType: "json",
     data: data,
     success: function(response) {
      if ( response ) {
       var submitted = validator.formSubmitted;
       validator.prepareElement(element);
       validator.formSubmitted = submitted;
       validator.successList.push(element);
       validator.showErrors();
      } else {
       var errors = {};
       errors[element.name] =  response || validator.defaultMessage( element, "remote" );
       validator.showErrors(errors);
      }
      previous.valid = response;
      validator.stopRequest(element, response);
     },
        error:function(e){
         alert("页面已过期,自动刷新页面");
         window.location.reload();
        }
    }, param));
    return "pending";
   } else if( this.pending[element.name] ) {
    return "pending";
   }
   return previous.valid;
  }

 

解决方法：

提交时

  jQuery("#code").data("previousValue").old = null;
  jQuery('#form2').submit();

将你的验证码输入框的previousValue的old值置为空，那么提交时，就会进行验证了。

附件里并非全部代码，缺少页面，仅供参考

评论

2 楼 pengjj2 2011-11-15  

额，莫非这么验证有错么？其他文本用validate,验证码框还要用其他方式，你不觉得麻烦么

1 楼 haohao-xuexi02 2011-11-15  

validate.js 只能对当前域文本做验证。。。。也包括它提供ajax方式。