bootstrapValidator中remote验证的delay不生效

  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));

两个版本的不同一目了然,有时候真的不得不看源码啊!换个版本,问题解决

本人亲测有效!如有不足,欢迎大家指正!


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值