validators: {
notEmpty: {
message: '用户名不能为空'
},
regexp: {
regexp: /^1[34578]\d{9}$/,
message: '手机号格式有误'
},
remote:{
type:'post',
url:'v1/users/registerExistOrNot',
delay:2000,//2s发一次ajax请求
data:function(validator,$field,value){
return {
username:validator.getFieldElements('username').val()
};
},
message:'用户名已存在,请登录',
},
different: {
field: 'password',
message: '用户名和密码不能相同'
}
}
最近在进行remote验证时发现,在remote中添加delay属性来降低对服务器的请求次数,并没有作用,百思不得其解,于是去研究了一下源码,豁然开朗,原来是版本问题作祟,在以前的版本(0.5.1)中,bootstrapValidator.js中没有delay的字段的说明,源码如下:
(function($) {
$.fn.bootstrapValidator.i18n.remote = $.extend($.fn.bootstrapValidator.i18n.remote || {}, {
'default': 'Please enter a valid value'
});
$.fn.bootstrapValidator.validators.remote = {
html5Attributes: {
message: 'message',
url: 'url',
name: 'name'
},
/**
* Request a remote server to check the input value
*
* @param {BootstrapValidator} validator Plugin instance
* @param {jQuery} $field Field element
* @param {Object} options Can consist of the following keys:
* - url {String|Function}
* - type {String} [optional] Can be GET or POST (default)
* - data {Object|Function} [optional]: By default, it will take the value
* {
* <fieldName>: <fieldValue>
* }
* - name {String} [optional]: Override the field name for the request.
* - message: The invalid message
* @returns {Boolean|Deferred}
*/
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
var name = $field.attr('data-bv-field'),
data = options.data || {},
url = options.url,
type = options.type || 'POST';
// Support dynamic data
if ('function' === typeof data) {
data = data.call(this, validator);
}
// Support dynamic url
if ('function' === typeof url) {
url = url.call(this, validator);
}
data[options.name || name] = value;
var dfd = new $.Deferred();
var xhr = $.ajax({
type: type,
url: url,
dataType: 'json',
data: data
});
xhr.then(function(response) {
dfd.resolve($field, 'remote', response.valid === true || response.valid === 'true', response.message ? response.message : null);
});
dfd.fail(function() {
xhr.abort();
});
return dfd;
}
};
}(window.jQuery));
看源码可以知道,并没有对delay属性进行处理,
而新的版本(0.5.3),对delay属性进行了处理,源码如下:
(function($) {
$.fn.bootstrapValidator.i18n.remote = $.extend($.fn.bootstrapValidator.i18n.remote || {}, {
'default': 'Please enter a valid value'
});
$.fn.bootstrapValidator.validators.remote = {
html5Attributes: {
message: 'message',
name: 'name',
type: 'type',
url: 'url',
data: 'data',
delay: 'delay'
},
/**
* Destroy the timer when destroying the bootstrapValidator (using validator.destroy() method)
*/
destroy: function(validator, $field, options) {
if ($field.data('bv.remote.timer')) {
clearTimeout($field.data('bv.remote.timer'));
$field.removeData('bv.remote.timer');
}
},
/**
* Request a remote server to check the input value
*
* @param {BootstrapValidator} validator Plugin instance
* @param {jQuery} $field Field element
* @param {Object} options Can consist of the following keys:
* - url {String|Function}
* - type {String} [optional] Can be GET or POST (default)
* - data {Object|Function} [optional]: By default, it will take the value
* {
* <fieldName>: <fieldValue>
* }
* - delay
* - name {String} [optional]: Override the field name for the request.
* - message: The invalid message
* - headers: Additional headers
* @returns {Deferred}
*/
validate: function(validator, $field, options) {
var value = $field.val(),
dfd = new $.Deferred();
if (value === '') {
dfd.resolve($field, 'remote', { valid: true });
return dfd;
}
var name = $field.attr('data-bv-field'),
data = options.data || {},
url = options.url,
type = options.type || 'GET',
headers = options.headers || {};
// Support dynamic data
if ('function' === typeof data) {
data = data.call(this, validator);
}
// Parse string data from HTML5 attribute
if ('string' === typeof data) {
data = JSON.parse(data);
}
// Support dynamic url
if ('function' === typeof url) {
url = url.call(this, validator);
}
data[options.name || name] = value;
function runCallback() {
var xhr = $.ajax({
type: type,
headers: headers,
url: url,
dataType: 'json',
data: data
});
xhr.then(function(response) {
response.valid = response.valid === true || response.valid === 'true';
dfd.resolve($field, 'remote', response);
});
dfd.fail(function() {
xhr.abort();
});
return dfd;
}
if (options.delay) {
// Since the form might have multiple fields with the same name
// I have to attach the timer to the field element
if ($field.data('bv.remote.timer')) {
clearTimeout($field.data('bv.remote.timer'));
}
$field.data('bv.remote.timer', setTimeout(runCallback, options.delay));
return dfd;
} else {
return runCallback();
}
}
};
}(window.jQuery));
两个版本的不同一目了然,有时候真的不得不看源码啊!换个版本,问题解决
本人亲测有效!如有不足,欢迎大家指正!