对bootstrapValidator进行扩展、自定义校验

我们在用bootstrapValidator校验form表单的时候,它定义的notEmpty,regexp,stringLength等有时候并不能满足我们需要,这时可以自己进行扩展,自定义校验

1. 添加一个bootstrapValidator.min.extend.js

  

2.写自定义校验代码

// 对bootstrapValidator进行扩展
(function($) {  
  //这里的notSameAndContinuity是验证的名字  
  //default是默认信息  
   $.fn.bootstrapValidator.i18n.notSameAndContinuity = $.extend($.fn.bootstrapValidator.i18n.notSameAndContinuity || {}, {  
       'default': 'Please enter a valid VIN number'  
   });  
   //validate是验证的方法  
   $.fn.bootstrapValidator.validators.notSameAndContinuity = {  
       validate: function(validator, $field, options) {  
           var value = $field.val(); 
           var reg = /(0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}\d/;
           var reg3 = /(9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5}\d/;
           if (reg.test(value)) {  
               return false;  
           }  
           if (reg3.test(value)) {  
            return false;  
           }  
           var reg2 = /^(?=.*\d+)(?!.*?([\d])\1{5})[\d]{6}$/;
           if (!reg2.test(value)){
            return false;  
           }
           return true;  
       }  
   };  
}(window.jQuery));

3.在js中运用自定义校验

// 第二步的表单
$('#form_step2').bootstrapValidator({
	feedbackIcons : {
		valid : 'glyphicon glyphicon-ok',
		invalid : 'glyphicon glyphicon-remove',
		validating : 'glyphicon glyphicon-refresh'
	},
	fields : {
		password : {
			validators : {
				notSameAndContinuity : {
					message : '密码必须为6位不相同、不连续的数字'
				}
			}
		},
		repeatPassword : {
			validators : {
				notEmpty : {
					message : '密码不能为空'
				},
				identical : {
					field : 'password',
					message : '密码不一致'
				}
			}
		}
	}
});

4.updateStatus(field, status, validatorName)
更新指定的字段状态。BootstrapValidator默认在校验某个字段合法后不再重新校验,当调用其他插件或者方法可能会改变字段值时,需要重新对该字段进行校验。

accountnoModal : {
	validators : {
		notEmpty : {
			message : '银行账号不能为空'
		},
		regexp : {
			regexp : /^\d{12,22}$/,
			message : '银行账号为12~22位数字'
		},
		callback : {
			callback : function(value, validator) {
				validator.updateStatus('accountnoConfirm', 'identical').validateField('accountnoConfirm');
				return true;
			}
		}
	}
},
accountnoConfirm : {
	validators : {
		notEmpty : {
			message : '确认银行账号不能为空'
		},
		identical : {
			field : 'accountnoModal',
			message : '两次银行账号输入不一致'
		}
	}
}


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值