欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-30 18:19:28
...

前几天使用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值置为空,那么提交时,就会进行验证了。

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