Element Ui使用技巧——Form表单的校验规则rules详细说明

Element UI中对Form表单验证的描述如下：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

文档中提及的用法有2种：

1.对整个表单进行规则验证：

 1 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 2   <el-form-item label="密码" prop="pass">
 3     <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
 4   </el-form-item>
 5   <el-form-item label="确认密码" prop="checkPass">
 6     <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
 7   </el-form-item>
 8   <el-form-item label="年龄" prop="age">
 9     <el-input v-model.number="ruleForm.age"></el-input>
10   </el-form-item>
11   <el-form-item>
12     <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
13     <el-button @click="resetForm('ruleForm')">重置</el-button>
14   </el-form-item>
15 </el-form>
16 <script>
17   export default {
18     data() {
19       var checkAge = (rule, value, callback) => {
20         if (!value) {
21           return callback(new Error('年龄不能为空'));
22         }
23         setTimeout(() => {
24           if (!Number.isInteger(value)) {
25             callback(new Error('请输入数字值'));
26           } else {
27             if (value < 18) {
28               callback(new Error('必须年满18岁'));
29             } else {
30               callback();
31             }
32           }
33         }, 1000);
34       };
35       var validatePass = (rule, value, callback) => {
36         if (value === '') {
37           callback(new Error('请输入密码'));
38         } else {
39           if (this.ruleForm.checkPass !== '') {
40             this.$refs.ruleForm.validateField('checkPass');
41           }
42           callback();
43         }
44       };
45       var validatePass2 = (rule, value, callback) => {
46         if (value === '') {
47           callback(new Error('请再次输入密码'));
48         } else if (value !== this.ruleForm.pass) {
49           callback(new Error('两次输入密码不一致!'));
50         } else {
51           callback();
52         }
53       };
54       return {
55         ruleForm: {
56           pass: '',
57           checkPass: '',
58           age: ''
59         },
60         rules: {
61           pass: [
62             { validator: validatePass, trigger: 'blur' }
63           ],
64           checkPass: [
65             { validator: validatePass2, trigger: 'blur' }
66           ],
67           age: [
68             { validator: checkAge, trigger: 'blur' }
69           ]
70         }
71       };
72     },
73     methods: {
74       submitForm(formName) {
75         this.$refs[formName].validate((valid) => {
76           if (valid) {
77             alert('submit!');
78           } else {
79             console.log('error submit!!');
80             return false;
81           }
82         });
83       },
84       resetForm(formName) {
85         this.$refs[formName].resetFields();
86       }
87     }
88   }
89 </script>

View Code

2.对单个表单域进行验证：

 1 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 2   <el-form-item
 3     prop="email"
 4     label="邮箱"
 5     :rules="[
 6       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
 7       { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
 8     ]"
 9   >
10     <el-input v-model="dynamicValidateForm.email"></el-input>
11   </el-form-item>
12   <el-form-item
13     v-for="(domain, index) in dynamicValidateForm.domains"
14     :label="'域名' + index"
15     :key="domain.key"
16     :prop="'domains.' + index + '.value'"
17     :rules="{
18       required: true, message: '域名不能为空', trigger: 'blur'
19     }"
20   >
21     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
22   </el-form-item>
23   <el-form-item>
24     <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
25     <el-button @click="addDomain">新增域名</el-button>
26     <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
27   </el-form-item>
28 </el-form>
29 <script>
30   export default {
31     data() {
32       return {
33         dynamicValidateForm: {
34           domains: [{
35             value: ''
36           }],
37           email: ''
38         }
39       };
40     },
41     methods: {
42       submitForm(formName) {
43         this.$refs[formName].validate((valid) => {
44           if (valid) {
45             alert('submit!');
46           } else {
47             console.log('error submit!!');
48             return false;
49           }
50         });
51       },
52       resetForm(formName) {
53         this.$refs[formName].resetFields();
54       },
55       removeDomain(item) {
56         var index = this.dynamicValidateForm.domains.indexOf(item)
57         if (index !== -1) {
58           this.dynamicValidateForm.domains.splice(index, 1)
59         }
60       },
61       addDomain() {
62         this.dynamicValidateForm.domains.push({
63           value: '',
64           key: Date.now()
65         });
66       }
67     }
68   }
69 </script>

View Code