vue+element UI表单验证

 element UI表单默认使用async-validator做验证，对它的用法做一些介绍。 

一、基本用法

 1 
14 
15

 1.创建form表单，绑定model及校验规则rules，给表单项绑定prop属性，需要注意prop、v-model、rules三者一致

1 
2     
3

如prop的age、文本域的v-model： age，rules.age。

2.添加校验规则

1 rules: {
2     name: [{ required: true, trigger: "blur" }],
3     age: [
4         { required: true, trigger: "blur", message: "年龄不能为空" },
5         { min: 18, max: 29, type: "number", trigger: ['blur', 'change'] , message: "年龄必须在18-29之间"}
6     ],
7 }

required为必填校验，

trigger为校验的触发时机，有blur和change，或trigger: ['blur', 'change']

message为校验不通过时的提示消息

校验规则可以添加多条。

                    

二、规则说明

required必填

type类型，可选值有string、number、boolean、methdod、regexp、integer、float、array、object、enum、date、url、email

pattern，需要符合的正则，如

1 { pattern: /^([a-zA-Z])\w*/g, message: '不符合标识符规则', trigger: 'blur' },

range，需要添加min和max属性，如果是字符串和数组，则要求其长度满足min和max之间，如果是数字则需要满足其值在min和max之间

length，需要添加len属性，如果是字符串和数组，则要求其长度等于len，如果是数字则需要满足其值等于len

enumberable，通过enum指定可使用的枚举值

三、自定义校验规则

如不允许输入的属性和已有的重复时，async-validator自有的规则就不能满足了，需要自定义校验规则。

自定义规则使用validator接收一个函数，

1 { validator: this.repeatValidate, message: '属性不能重复', trigger: 'blur' }，

repeatValidate函数有三个参数，rule为校验规则，value为输入的值，callback为校验的回调，

repeatValidate (rule, value, callback) { ... callback() }

完整代码如下：

 1 
17 
18

                       

四、常见问题

1.属性名中含有"."的处理

如有个属性的名称中含有“.”, 

1 
2     
3 
1 ruleForm: {
2     "book.price": "",
3     name: "",
4     password: "",
5     age: "",
6     newProperty: "",
7 }

Error in mounted hook: "Error: please transfer a valid prop path to form item!"

原因在于prop认为对应的属性为：ruleForm.book.price，也就是

1 ruleForm: {
2     book: {
3         price: "",
4     }
5 }

而不是ruleForm['book.price']。所以不建议使用带“.”的字段名。

 2.动态表单校验

表单项是动态生成的一系列表单，不能预先为每一个表单项设置prop属性，这样可以利用特殊的索引设置prop。

如生成表单项的数据为books列表，这样设置 :prop="'books.' + index + '.name'"，同时把规则绑定在表单项上。

完整代码如下：

 1 
20 
21

                                                 

 3.下拉框失焦时不触发校验 

对于select，失焦时常常不能触发校验，如下没有选择内容失焦时不能触发必填校验。

可以给select添加blur和change的处理函数，在处理函数中调用表单的validateField方法，单独对该字段进行校验。

建议同时添加blur和change的处理函数，不然会出现blur时校验，但选择内容后校验不消失的问题。

 1 item
 2     label="选择"
 3     prop="selProp"
 4     :rules="{
 5         required: true,
 6         message: 'select不能为空',
 7         trigger: ['blur', 'change'],
 8     }"
 9 >
10 
11     A
12     B
13 
1 blurHandler(prop) {
2     this.$refs.ruleForm.validateField(prop, (val) => {
3         console.info(val);
4     });
5 },

相关

标签