关于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值置为空,那么提交时,就会进行验证了。
附件里并非全部代码,缺少页面,仅供参考
上一篇: Kubernetes学习之DaemonSet控制器
下一篇: CSS特殊样式(九)悬浮效果菜单