BootstrapValidator自定义中文长度校验

原理

中文字符占用3个长度,在原stringLength校验方法的基础上做了一个扩展。

程序

;(function($) {
    $.fn.bootstrapValidator.validators.proStringLength = {
        html5Attributes: {
            message: 'message',
            min: 'min',
            max: 'max'
        },

        enableByHtml5: function($field) {
            var options   = {},
                maxLength = $field.attr('maxlength'),
                minLength = $field.attr('minlength');
            if (maxLength) {
                options.max = parseInt(maxLength, 10);
            }
            if (minLength) {
                options.min = parseInt(minLength, 10);
            }

            return $.isEmptyObject(options) ? false : options;
        },
        validate: function(validator, $field, options) {
            var value = $field.val();
            
            if (value === '') {
                return true;
            }
            var length = value.length;
            for (var i = 0; i < length; i++) {
                if (value.charCodeAt(i) > 127) {
                    length=length+2; 
                }
            }
            var min     = $.isNumeric(options.min) ? options.min : validator.getDynamicOption($field, options.min),
                max     = $.isNumeric(options.max) ? options.max : validator.getDynamicOption($field, options.max),
                isValid = true,
                message = options.message || $.fn.bootstrapValidator.i18n.stringLength['default'];
            
            if ((min && length < parseInt(min, 10)) || (max && length > parseInt(max, 10))) {
                isValid = false;
            }

            switch (true) {
                case (!!min && !!max):
                    message = $.fn.bootstrapValidator.helpers.format(options.message || $.fn.bootstrapValidator.i18n.stringLength.between, [parseInt(min, 10), parseInt(max, 10)]);
                    break;

                case (!!min):
                    message = $.fn.bootstrapValidator.helpers.format(options.message || $.fn.bootstrapValidator.i18n.stringLength.more, parseInt(min, 10));
                    break;

                case (!!max):
                    message = $.fn.bootstrapValidator.helpers.format(options.message || $.fn.bootstrapValidator.i18n.stringLength.less, parseInt(max, 10));
                    break;

                default:
                    break;
            }

            return { valid: isValid, message: message };
        }
    };
}(window.jQuery));

使用

accountNo: {
            message: '账号验证失败',
            validators: {
                notEmpty: {
                    message: '账号不能为空'
                },
                proStringLength: {
                    min: 1,
                    max: 100,
                    message: '长度必须小于100,中文占3个字符'
                }
            }
        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Vue Validator是一个用于Vue.js的校验库,它可以帮助我们快速地实现表单校验功能。如果我们需要自定义校验规则,可以通过在Vue Validator中添加自定义校验器来实现。具体步骤如下: 1. 在Vue Validator中定义一个自定义校验器,可以使用Vue.extend方法来创建一个新的Vue实例,然后在这个实例中定义校验规则。 2. 在Vue Validator中注册自定义校验器,可以使用Vue.validator方法来注册自定义校验器,将自定义校验器的名称和校验规则传入即可。 3. 在模板中使用自定义校验器,可以在表单元素的v-validate属性中使用自定义校验器的名称,然后在错误提示信息中使用自定义校验器的名称即可。 例如,我们可以定义一个自定义校验器来验证手机号码的格式: Vue.validator('phone', function (val) { return /^1[3456789]\d{9}$/.test(val); }); 然后在模板中使用这个自定义校验器: <input type="text" v-model="phone" v-validate="'required|phone'" /> <span v-show="errors.has('phone')">请输入正确的手机号码</span> 这样就可以实现对手机号码格式的校验了。 ### 回答2: Vue Validator 是一个非常强大的表单校验库,它可以帮助我们轻松地实现表单验证功能。Vue Validator 提供了一些常见的校验规则,例如必填、数字、手机号等。如果我们需要实现一些自定义校验规则,也可以通过实现自定义校验器来实现。 Vue Validator自定义校验非常简单,只需要在 Vue 实例中定义一个自定义校验器对象,然后在表单元素的校验规则中使用即可。下面是一个简单的例子: ```javascript Vue.use(VeeValidate); const customValidator = { getMessage(field, params, data) { return (data && data.message) || '输入值不正确'; }, validate(value, args) { if (args.some(arg => value.indexOf(arg) !== -1)) { return true; } return false; } }; new Vue({ el: '#app', data: { inputValue: '', }, validations: { inputValue: { custom: customValidator, } }, }); ``` 在这个例子中,我们定义了一个名为 customValidator自定义校验器对象。这个校验器对象包含两个方法,getMessage 和 validate。其中,getMessage 方法用于返回校验失败的提示信息,validate 方法用于实现校验逻辑。 在 Vue 实例的 validations 属性中,我们定义了一个名为 inputValue 的表单元素,并使用了 custom 校验规则,这个规则对应了我们刚才定义的 customValidator 自定义校验器对象。 在页面中,我们只需要在表单元素上通过 v-model 绑定 input 中的数据,然后通过 v-validate 绑定校验规则即可: ```html <div id="app"> <form> <label>输入值:</label> <input type="text" v-model="inputValue" v-validate="'custom:foo,bar'"> <div class="errors"> <span v-if="errors.has('inputValue')">{{errors.first('inputValue')}}</span> </div> </form> </div> ``` 通过这个例子,我们可以看到,在 Vue Validator自定义校验是非常简单的。只需要定义一个自定义校验器对象,并在 validations 中使用即可。通过自定义校验器对象,我们可以实现各种复杂的校验逻辑,方便快捷地完成表单校验。 ### 回答3: vue validator是vue.js的一个插件,用于表单数据的校验。vue validator提供了常用的校验规则,如必填、邮箱、手机号等,同时也支持自定义校验自定义校验是基于validator.js进行封装的,因此在使用自定义校验时,需要先了解validator.js中支持的校验规则。 首先,在vue组件中引入validator.js和vue validator插件: ```javascript import validate from 'validator'; import VeeValidate, { Validator } from 'vee-validate'; import zh_CN from 'vee-validate/dist/locale/zh_CN'; Vue.use(VeeValidate); Validator.extend('customRuleName', { getMessage: (field, args) => { return `自定义校验错误信息`; }, validate: (value, args) => { // 校验逻辑 return true/false; }, }); ``` 以上代码中,通过Validator.extend方法定义了一个自定义校验规则‘customRuleName’,该规则接收两个参数,分别是getMessage和validate。 getMessage是用于定义该规则的校验失败后的错误信息,可以接收两个参数,分别是校验字段的名称和自定义规则的参数。 validate是定义该规则的校验逻辑,同样接收两个参数,分别是校验字段的值和自定义规则的参数。 在以上代码中,自定义校验规则的参数是args,可以根据规则需要自行指定。 自定义规则定义完成后,只需要在vue组件中使用指定规则即可。在表单中添加属性‘v-validate:规则名称=""’即可使用自定义规则。 例如: ```javascript <input type="text" name="phone" v-model="phone" v-validate:customRuleName=""> ``` 以上代码中,该表单字段使用了自定义校验规则‘customRuleName’,当该表单字段值发生变化时,会触发vue validator校验逻辑,如果校验不通过,则会自动显示‘getMessage’方法返回的错误信息。 自定义校验在vue表单开发中扮演着非常重要的角色,可以满足各种复杂的业务场景需求。但需要注意,在使用自定义校验时一定要严谨,保证校验逻辑的准确性和完整性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值