js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生

上一部分总结了基础常用的js表单校验，包括原生以及框架，下面来总结这一个月涉及到的动态校验：

动态表单校验大致分为三种情况：

1. 首先是固定校验规则，但是表单组件是动态生成的，例如：在表单或者表格里有“增加”功能，增加一行，给新生成的表单组件添加校验规则。

2. 第二类就是组件固定，但是校验规则会随着其他条件的变化而变化，例如：基本的最常见的例子是确认密码的校验，判断第二次输入的密码与第一次输入是否一致。

3. 最后，比较复杂的就是以上两类情况的混合情况，动态生成的表单，且校验规则也是动态变化的。

接下来还是用最直观的举例子来解释用法：

这里使用了element自带的rules，其他框架同理，也可以自己绑定方法，原生的用blur，focus等也可以

一：固定校验规则+组件动态生成

要实现的效果：点击第一行的新增生成下面的表格，表格各自校验

实现方法代码举例：

html ：（放到表格里的组件，和表单同理）

1 <el-table-column align="center" label="金额标准" prop="level">
2     <template slot-scope="scope">
3         <span v-if="scope.row.edit">{{ scope.row.level}}</span>
4         <el-form-item v-show="!scope.row.edit" :prop="'list.'+scope.$index+'.level'" :rules="rules.level">
5             <el-input v-model="scope.row.level" autofocus placeholder="请输入金额标准"></el-input>
6         </el-form-item>
7     </template>
8 </el-table-column>

js ：（校验规则以及触发方式定义）

 1 data() {
 2             return {
 3                     rules:{
 4                         level: [
 5                             {required: true, message: '请输入金额标准', trigger: ['blur', 'change']},
 6                             { validator:function(rule,value,callback){
 7                                 if(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(Number(value)) == false||Number(value)>10000){
 8                                     callback(new Error("请输入数字,可保留两位小数,最大不超过10000"));
 9                                 }else if(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(Number(value)) == false){
10                                     callback(new Error("请输入数字,可保留两位小数,最大不超过10000"));
11                                 }else{
12                                     callback();
13                                 }
14                             }, trigger:['blur', 'change']
15                         }
16                     ],
17                 }
18             }
19 }        

js：（实现方式）

 1 formValidate(formName){
 2      this.$refs[formName].validate((valid) => {
 3          if(valid) {
 4             this.validateForm=true;
 5          }else{
 6             this.$message.warning("请确认输入信息无误！");
 7             this.validateForm=false;
 8          }
 9     });
10     return this.validateForm;
11  }

调用formValidate方法即可。

二：固定组件+动态校验规则

要实现的效果：（element官方举例）

实现方法代码举例：

html：

1 <el-form :model="ruleForm" status-icon :rules="rules" ref="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>

js：（校验规则可以定义到return之前，也可以直接放到rules里）

 1 data() {
 2       var validatePass = (rule, value, callback) => {
 3         if (value === '') {
 4           callback(new Error('请输入密码'));
 5         } else {
 6           if (this.ruleForm.checkPass !== '') {
 7             this.$refs.ruleForm.validateField('checkPass');
 8           }
 9           callback();
10         }
11       };
12       var validatePass2 = (rule, value, callback) => {
13         if (value === '') {
14           callback(new Error('请再次输入密码'));
15         } else if (value !== this.ruleForm.pass) {
16           callback(new Error('两次输入密码不一致!'));
17         } else {
18           callback();
19         }
20       };
21       return {
22         ruleForm: {
23           pass: '',
24           checkPass: ''
25         },
26         rules: {
27           pass: [
28             { validator: validatePass, trigger: 'blur' }
29           ],
30           checkPass: [
31             { validator: validatePass2, trigger: 'blur' }
32           ]
33         }
34       };

三：动态生成组件+动态校验规则

要实现的效果：三个组件分别纵向对比校验，各组件个数不固定，为动态生成，各自校验规则也相互影响，人数2依附于人数1的输入值。

实现方法代码举例：

html：（绑定prop以及rules）

 1                             <tr>
 2                                 <td>
 3                                     <div>
 4                                         <div><label class="col-sm-4 control-label addbefore">天数</label>
 5                                         </div>
 6                                     </div>
 7                                 </td>
 8                                 <td>
 9                                     <div>
10                                         <template v-for="(item, index) in form.list1">
11                                             <el-form-item
12                                                     :key="item.key"
13                                                     :id="item.key"
14                                                     :name="item.key"
15                                                     style="float: left;"
16                                                     :prop="'list1.' + index +'.a_value'"
17                                                     :rules="rules.a_value1">
18                                                 <el-input v-model.number="item.a_value"></el-input>
19                                                 <span>天</span>
20                                             </el-form-item>
21                                         </template>
22                                     </div>
23                                 </td>
24                             </tr>
25                             <tr>
26                                 <td>
27                                     <div>
28                                         <label>人数1</label>
29                                     </div>
30                                 </td>
31                                 <td>
32                                     <div>
33                                         <template v-for="(domain, index) in form.list2">
34                                             <el-form-item
35                                                     :key="domain.key"
36                                                     :id="domain.key"
37                                                     :name="domain.value"
38                                                     style="float: left;"
39                                                     :prop="'list2.' + index +'.b_value'"
40                                                     :rules="rules.b_value">
41                                                 <el-input v-model.number="domain.b_value"></el-input>
42                                                 <span>人</span>
43                                             </el-form-item>
44                                         </template>
45                                     </div>
46                                 </td>
47                             </tr>
48                             <tr>
49                                 <td>
50                                     <div>
51                                         <label>人数2</label>
55                                     </div>
56                                 </td>
57                                 <td>
58                                     <div>
59                                         <template v-for="(domain, index) in form.list3">
60                                             <el-form-item
61                                                     :key="domain.key"
62                                                     :id="domain.key"
63                                                     :name="domain.value"
64                                                     style="float: left;"
65                                                     :prop="'list3.' + index +'.c_value'"
66                                                     :rules="rules.c_value">
67                                                 <el-input v-model.number="domain.c_value"></el-input>
68                                                 <span>人</span>
69                                             </el-form-item>
70                                         </template>
71                                     </div>
72                                 </td>
73                             </tr>

js ：（数据及校验规则定义）

 1 data(){
 2     var me=this
 3     return {
 4         form:{
 5             list1:[],
 6             list2:[],
 7             list3:[]
 8         }
 9         rlues:{
10             　　a_value: [
11                             { required: true, message: '请输入', trigger: ['blur', 'change'] },
12                             { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
13                             {
14                                 validator: (rule, value, callback) => {
15                                     if (value > 200) {
16                                         callback(new Error('天数应小于200'))
17                                     } else {
18                                         callback()
19                                     }
20                                 },
21                                 trigger: ['blur', 'change']
22                             }
23                         ],
24                 b_value:[
25                             { required: true, message: '请输入', trigger: ['blur', 'change'] },
26                             { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
27                             {
28                                 validator: (rule, value, callback) => {
29                                     if (value > 100) {
30                                         callback(new Error('人数1应小于100'))
31                                     } else {
32                                         callback()
33                                     }
34                                 },
35                                 trigger: ['blur', 'change']
36                             }
37                         ],
38                  c_value:[
39                             { required: true, message: '请输入', trigger: ['blur', 'change'] },
40                             { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
41                             {
42                                 validator: (rule, value, callback) => {
43                                     let index=Number(rule.field.substr(6, 1))
44                                     let sc=(me.form.list2[index].b_value)*0.1
45                                     if (value > sc) {
46                                         callback(new Error('人数2不超过人数1的10%'))
47                                     } else {
48                                         callback()
49                                     }
50                                 },
51                                 trigger: ['blur', 'change']
52                             }
53                         ]
54                 }
55         }
56 }

js：（实现方式）

 1 formValidate(formName){
 2                     this.$refs[formName].validate((valid) => {
 3                         if(valid) {
 4                             this.validateForm=true;
 5                         }else{
 6                             this.$message.warning("请确认输入信息无误！");
 7                             this.validateForm=false;
 8                         }
 9                     });
10                     return this.validateForm;
11                 }

总结：

这三种情况其实基本原理是相同的，即是在变化的元素以及变化的标准怎么比较，首先来说确定两点，一是要绑定prop，动态双向绑定，相当于生成组件是时给该元素生成一个标识，一般来说动态绑定写法如下：

　　　　  :prop="'list.' + index +'.value'" 

　　　　   或者写成
　　　　:prop="'list.'+scope.$index+'.value'"  

其次，是绑定一个规则：

　　　　:rules="rules.value"

然后就是具体校验，可以写到html里，也可以写到js里，一般来说有校验方法的写到js里，需要注意的是 validator: (rule, value, callback) => { }，这个回调方法里的三个参数：

　　第一个参数 rule，为绑定元素的prop，主要用来取到需要进行比较的值，即规则；

　　第二个参数 value，为此时输入的内容，和规则作比较，是否符合；

　　第三个参数 callback，为校验完的回调函数，校验成功或失败的提示在callback函数中执行；

以上为动态校验总结。

这两篇内容详细记录了我遇到的，以及所有能想到的前端校验的情况的相关内容，欢迎补充。