您的位置:首页 > Web前端 > JQuery

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是将校验的元素改为验证码元素,不然后面验证通过验证样式可能有问题
/**
* 修改验证码远程验证返回非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";
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  validate