element-ui动态表单和验证

在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。除了官方示例，还可以使用循环生成多个form实现该需求。

第一种官方示例：一个Form多项

下面以实际项目中的代码为例：

      

            
              
            
            
              
            
            

              添加
              删除
            
      

注意重点

• form表单里的 :model="form" :rules="rules"model和rules不能省略，而且这个model必须是个对象，虽然在当前例子里，我们的数据form其实就是一个数组，但是还要包裹一层成对象。
• 每一项绑定prop时，一定要按照:prop=" 'list.' + index + '.maintUnit'"这种格式，list是需要循环的数组key名，一定不要写成form.list，也不是循环出的每一项item，index是每项的下标，maintUnit是当前字段key值。
• 每一项必须单独绑定验证规则，如例子中的:rules="rules.maintUnit"
• prop和当前字段的key值要保持一致，无论是动态表单还是静态表单都要保持一致
• 验证规则不能用正则
• 表单验验证时，一定要有默认值。比如form里的input绑定的是v-model="form.value"，data里定义form时一定要要加value，如form: { value: '' }

第二种：多个form

    
        
                
                    
                
                
                    
                
                
                    
                        元
                    
                
                
                    
                
                
                    
                
    

复杂表单的验证

很多时候会遇到其中一个值，需要当前项的某个值做验证，如上第二种表单中，要求计划完成金额不能大于预算量，这里有两种实现方式

1、通过 rule.field获取到当前项下标，只适用第一种动态表单；

validEverydayBudgetAmount(rule, value, callback) {
    if (value) {
        if (!isNumber2(value)) {
            callback(new Error('填写格式错误'))
            return
        }
        // rule.field转为数组后第二个就是下标
        const index = rule.field.split('.')[1]
        const budgetAmount = this.everydayCost[index].budgetAmount
        if (value > budgetAmount) {
            callback(new Error(`不能大于总预算量${budgetAmount}`))
        } else {
            callback()
        }
    } else {
        callback()
    }
},

2、把验证规则写在item行内，这样就可以通过传参获取当前项值；

// 验证规则见第二种表单的示例代码

获取验证结果

第二种多个form的，验证结果获取较为麻烦，因为每个验证都是异步，这里使用promise方式获取。父组件获取验证结果时，调用子组件内handleValidate方法，通过then或者await获取结果即可。

// 获取多个form验证结果，具体参考第二种form代码
handleValidate() {
    const list = []
    const validas = []
    this.$refs['form'].forEach((item, index) => {
        // 把单个验证结果处理为promise函数，然后添加到list中
        list.push(new Promise(resolve => {
            item.validate(valida => {
                validas.push(valida)
                resolve()
            })
        })
        )
    })
    // 通过Promise.all等待几个验证都完成再处理
    return Promise.all([...list]).then(() => {
        const res = !validas.some(item => item === false)
        return res
    }).catch(() => {
        return false
    })
}