我在实际项目开发中遇到的关于ElementUI各种表单验证
2010 年 8 月 12 日
rules: { real_operator_id: {required: true, message: '请选择委托方', trigger: 'change'} }
第二种 正则验证字段
rules:{ capacity: [ {required: true, message: '请输入容纳人数', trigger: 'change'}, {pattern: /^[1-9][0-9]{0,3}$/, message: '只能输入正整数,且不超过4位数', trigger: 'change'}], }
:warning:什么电话、邮箱、数字、英文、汉字…等能用正则验证都可以用这个方式。
第三种 富文本必填验证
rules: { content: [ {required: true, message: '请填写政策内容', trigger: 'change'} ], }
这里采用一个骚操作,原本输入框的验证都是监听的输入框的各种事件(change,blur),然而富文本都是第三方插件,无法监听到,所以就利用了vue的双向绑定原理,写一个隐藏的输入框,搞定。
第四种 多个输入框
data() { let checkBuilding = (rule, value, callback) => { if (!this.form.building_id) { callback(new Error('请选择写字楼')); } else if (!this.form.building_detail.id) { callback(new Error('请选择楼栋')); } else if (this.unitList.length && !this.form.building_detail.unit_id) { callback(new Error('请选择单元')); } else if (!this.form.building_detail.floor) { callback(new Error('请填写楼层')); } else { callback(); } }; return { rules: { building_id: {required: true, validator: checkBuilding, trigger: 'change'}, } } }
第五种 动态验证-普通的动态验证
官网拷贝的代码,占个位置。
删除
第六种 动态验证-多个输入框验证
第一种情况 每个输入框单独验证
在样式很好控制的情况下,循环生成多个 ,单独验证
层
第二种情况 统一验证
有的时候,迫于样式的困扰,我们只能写多个输入框,而不能生成多个 ,在同一个
下统一验证
使用前 小时取消,扣除订单总额 %费用(不含保证金)
rule长这样:
methods: { // 验证rule checkRules(rule, value, callback) { // 通过rule.field 拿到index ,剩下的都常规操作了 let index = rule.field.split('.')[1] - 0; if (!this.form.rules[index].hours || !this.form.rules[index].percent) { callback(new Error('请填写规则')); } else if (Number(this.form.rules[index].percent) > 100) { callback(new Error('百分比不能超过100%')); } else { callback(); } }, }
第七种 动态验证-关联验证
填了租金才会触发对应的租金时间段验证
第八种 动态验证-判重
....
attentionIndustryValidator(rule, val, callback) { let num = 0; this.industryForm.follow.forEach(item => { // 这里做一次数组判重 if (this.equals(val, item.industry)) { num++; } }); if (num >= 2) { callback(new Error('请勿重复选择相同的行业!')); } else { callback(); } },
第九种 清除某一个输入项验证
如图开始选择了意向类型为 按面积 ,此时已经验证了意向面积的值,并提示错误信息,然后切换为 按工位 ,如果不清除意向面积的验证,则 错误信息会一直存在 。
...
watch: { 'form.intention_type': { handler() { this.$refs['areaForm'].clearValidate(); } } },
最后
我们自定义验证(validator),有两种方式。
- 第一种 定义在data中
data() { let testrule1 = (rule,val,callback) => {}; return {} }
使用方式是在 data
中的 rule
里引入:
data(){ let testRule1 = (rule,val,callback) => {}; return { rules: { name:{required: true, validator:testRule1, trigger:'blur'} } } }
- 第二种 定义在methods中
methods: { testRule2(rule, val, callback) {} }
使用方式是在 中引入:
...