jquery-validate remote 远程校验返回非boolean类型处理
2018-03-06 15:00
573 查看
文档地址:http://www.runoob.com/jquery/jquery-plugin-validate.html
关于处理远程校验处理返回非boolean值的处理
在表单校验的时候经常用到验证码,验证码返回的结果有好多种,如:过期,错误等不同类型的错误,这个时候用boolean就不能处理该问题,这个时候就需要查看源代码,修改方法获取支持。
通过查看源代码加断点调试就会发现,remote会调用下面方法进行验证
jquery-validate.js
remote: function( value, element, param ) {
if ( this.optional( element ) ) {
return "dependency-mismatch";
}
var previous = this.previousValue( element ),
validator, data;
if (!this.settings.messages[ element.name ] ) {
this.settings.messages[ element.name ] = {};
}
previous.originalMessage = this.settings.messages[ element.name ].remote;
this.settings.messages[ element.name ].remote = previous.message;
param = typeof param === "string" && { url: param } || param;
if ( previous.old === value ) {
return previous.valid;
}
previous.old = value;
validator = this;
this.startRequest( element );
data = {};
data[ element.name ] = value;
$.ajax( $.extend( true, {
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: data,
context: validator.currentForm,
success: function( response ) {
var valid = response === true || response === "true",
errors, message, submitted;
validator.settings.messages[ element.name ].remote = previous.originalMessage;
if ( valid ) {
submitted = validator.formSubmitted;
validator.prepareElement( element );
validator.formSubmitted = submitted;
validator.successList.push( element );
delete validator.invalid[ element.name ];
validator.showErrors();
} else {
errors = {};
message = response || validator.defaultMessage( element, "remote" );
errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message;
validator.invalid[ element.name ] = true;
validator.showErrors( errors );
}
previous.valid = valid;
validator.stopRequest( element, valid );
}
}, param ) );
return "pending";
}这个时候通过各种调试进行必要的修改,通过看代码会发现ajax success方法 有 var valid = response === true || response === "true",
1.获取结果是否是boolean的,如果只是涉及返回的结果在后台有做处理只做显示的话,只需要修改下面代码,因为我返回的信息是 {"ret":1,"msg":"验证码已过期!","err":2000},所以我会直接用 response.msg 这个
message = response || validator.defaultMessage( element, "remote" );
改为
message = response.msg || validator.defaultMessage( element, "remote" );2.我这边因为用到手机号获取验证码,还得校验手机号是否是正确的,这个时候在验证验证码之前需要对手机号进行验证,正确了才会去验证验证码所以还得需要修改代码
if (!this.element("#phone1")) {
return true;
} else {
var checkElement = this.validationTargetFor( this.clean( element ) );
this.prepareElement( checkElement );
this.currentElements = $( checkElement );
}这句是验证手机号是否是正确的,因为验证手机号后校验元素会变成phone1,这个可以通过调试看this.validElements()这个方法就清楚,所以else是将校验的元素改为验证码元素,不然后面验证通过验证样式可能有问题
关于处理远程校验处理返回非boolean值的处理
在表单校验的时候经常用到验证码,验证码返回的结果有好多种,如:过期,错误等不同类型的错误,这个时候用boolean就不能处理该问题,这个时候就需要查看源代码,修改方法获取支持。
通过查看源代码加断点调试就会发现,remote会调用下面方法进行验证
jquery-validate.js
remote: function( value, element, param ) {
if ( this.optional( element ) ) {
return "dependency-mismatch";
}
var previous = this.previousValue( element ),
validator, data;
if (!this.settings.messages[ element.name ] ) {
this.settings.messages[ element.name ] = {};
}
previous.originalMessage = this.settings.messages[ element.name ].remote;
this.settings.messages[ element.name ].remote = previous.message;
param = typeof param === "string" && { url: param } || param;
if ( previous.old === value ) {
return previous.valid;
}
previous.old = value;
validator = this;
this.startRequest( element );
data = {};
data[ element.name ] = value;
$.ajax( $.extend( true, {
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: data,
context: validator.currentForm,
success: function( response ) {
var valid = response === true || response === "true",
errors, message, submitted;
validator.settings.messages[ element.name ].remote = previous.originalMessage;
if ( valid ) {
submitted = validator.formSubmitted;
validator.prepareElement( element );
validator.formSubmitted = submitted;
validator.successList.push( element );
delete validator.invalid[ element.name ];
validator.showErrors();
} else {
errors = {};
message = response || validator.defaultMessage( element, "remote" );
errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message;
validator.invalid[ element.name ] = true;
validator.showErrors( errors );
}
previous.valid = valid;
validator.stopRequest( element, valid );
}
}, param ) );
return "pending";
}这个时候通过各种调试进行必要的修改,通过看代码会发现ajax success方法 有 var valid = response === true || response === "true",
1.获取结果是否是boolean的,如果只是涉及返回的结果在后台有做处理只做显示的话,只需要修改下面代码,因为我返回的信息是 {"ret":1,"msg":"验证码已过期!","err":2000},所以我会直接用 response.msg 这个
message = response || validator.defaultMessage( element, "remote" );
改为
message = response.msg || validator.defaultMessage( element, "remote" );2.我这边因为用到手机号获取验证码,还得校验手机号是否是正确的,这个时候在验证验证码之前需要对手机号进行验证,正确了才会去验证验证码所以还得需要修改代码
if (!this.element("#phone1")) {
return true;
} else {
var checkElement = this.validationTargetFor( this.clean( element ) );
this.prepareElement( checkElement );
this.currentElements = $( checkElement );
}这句是验证手机号是否是正确的,因为验证手机号后校验元素会变成phone1,这个可以通过调试看this.validElements()这个方法就清楚,所以else是将校验的元素改为验证码元素,不然后面验证通过验证样式可能有问题
/** * 修改验证码远程验证返回非false处理 */ jQuery.extend( jQuery.validator.methods, { // http://jqueryvalidation.org/remote-method/ remote: function( value, element, param ) { if (!this.element("#phone1")) { return true; } else { var checkElement = this.validationTargetFor( this.clean( element ) ); this.prepareElement( checkElement ); this.currentElements = $( checkElement ); } if ( this.optional( element ) ) { return "dependency-mismatch"; } var previous = this.previousValue( element ), validator, data; if (!this.settings.messages[ element.name ] ) { this.settings.messages[ element.name ] = {}; } previous.originalMessage = this.settings.messages[ element.name ].remote; this.settings.messages[ element.name ].remote = previous.message; param = typeof param === "string" && { url: param } || param; if ( previous.old === value ) { return previous.valid; } previous.old = value; validator = this; this.startRequest( element ); data = {}; data[ element.name ] = value; $.ajax( $.extend( true, { mode: "abort", port: "validate" + element.name, dataType: "json", data: data, context: validator.currentForm, success: function( response ) { var valid = response === true || response === "true", errors, message, submitted; validator.settings.messages[ element.name ].remote = previous.originalMessage; if ( valid ) { submitted = validator.formSubmitted; validator.prepareElement( element ); validator.formSubmitted = submitted; validator.successList.push( element ); delete validator.invalid[ element.name ]; validator.showErrors(); } else { errors = {}; message = response.msg || validator.defaultMessage( element, "remote" ); errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message; validator.invalid[ element.name ] = true; validator.showErrors( errors ); } previous.valid = valid; validator.stopRequest( element, valid ); } }, param ) ); return "pending"; } });
相关文章推荐
- jquery-validate remote验证,返回不同的消息内容
- jquery validate 校验 文件上传类型
- jquery validate remote 返回错误
- jquery.validate 校验 remote返回值
- javascript后台直接返回Boolean类型处理
- jquery.validate.js remote 数据远程验证
- jquery.validate.js数据远程校验
- [转载]jquery.validate.js remote 数据远程验证
- jQuery Validate 插件验证,,返回不同信息(json remote)自定义
- 对于服务器返回的JSON字符串,如果 jQuery 异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理
- 将jquery validate校验框架的remote异步验证设置为同步校验
- jquery-validate remote验证,返回不同的消息内容
- jquery.validate中使用remote,remote相同值不校验问题解决
- 利用struts2的json返回方式来控制jquery.validate的remote框架,进行表单验证
- JQuery处理json与ajax返回JSON实例
- jQuery的Ajax中dataType选项用于设置返回值类型
- [jQuery] 关于使用 ajax 时处理返回的数据
- AIDL实现不同应用之间跨进程通讯及传递与返回各种数据类型和远程接口回调
- jquery请求格式和返回类型 汇总
- ashx页面返回json字符串|jQuery 的ajax处理请求的纠结问题