vue-elementUI-表单嵌套验证

一：表单一级验证
element 中 from 组件内表单验证通过使用 el-form 标签，绑定 model 和 rules 属性进行表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent>

<el-form-item label="客户名称:" size="small" prop="belongId">
    <el-input v-show="false" v-model="form.belongId"></el-input>
    <ComSelectorCustomer :value="form.customerName" @change="choice"></ComSelectorCustomer>
</el-form-item>

简单的表单验证很简单，在 prop 内绑定验证属性，然后在 rules 对象内定义验证方法

rules: {
         belongId: [{
            required: true,
            message: '不能为空',
            trigger: 'change'
         }]
}

二：模板一次循环渲染时表单验证

<el-row v-for="(item, index) in form.warehouseList" :key="index">
    <el-col :span="21">
       <el-form-item label="厂库名称:" size="small" :prop="'warehouseList.' + index + '.factoryName'">
           <el-select
              v-model="item.factoryName"
              clearable
              filterable>
              <el-option
                 v-for="(child, ind) in factoryList"
                 :key="ind"
                 :label="child.label"
                 :disabled="child.disabled"
                 :value="child.value"></el-option>
            </el-select>
        </el-form-item>
     </el-col>
</el-row>

循环内模板验证 prop 绑定值就是一个问题了，因为它是循环出来的没办法直接写死在内，所以 prop 就需要动态绑定验证属性，这里需要注意一下，动态 prop 内绑定的是要和 form 内定义的属性名以及 model 绑定的值要对应上。比如上面 prop 里的 factoryName，form.warehouseList 里子元素也要有这个属性，select 中 model 绑定的也应该是 factoryName。因为是循环出来的，所以 model 绑定的就是‘item.factoryName’。

 如果 prop 内绑定的验证属性名对应不上，控制台一般都会报下面这个错误
 ![cuowu.png](/img/bVbzWSa)

三：循环嵌套循环的表单验证

 比如说是这种：

 from: {
        warehouseList: [{
            productList: [{
                productNumber: '',
                productUnitPrice: ''
            }]
        }]
    }

要是需要监听 productList 中的 productNumber，并且进行验证，这就是第三层的验证。

<div v-for="(itemChild, itemIndex) in item.productList" :key="itemIndex">
     <el-col :span="9">
     <el-form-item label="客户品名:" label-width="110px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'">
        <el-input v-show="false" v-model="itemChild.productName"></el-input>
       <ComSelectorProduct :value="itemChild.productName"
       @change="choice"></ComSelectorProduct>
     </el-form-item>
 </el-col>
 <el-col :span="4">
     <el-form-item label="数量:" label-width="60px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productNumber'">
        <el-input clearable v-model="itemChild.productNumber" placeholder="数量"></el-input>
     </el-form-item>
  </el-col>
</div>

prop 内绑定的值需要把第一层循环时的父元素 warehouseList 一并写上一直写到 input 内绑定的 model 值

:prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'"

验证方法：

setRulesProduct() {
                let that = this
                let list1 = that.form.warehouseList
                // let list2 = that.form.warehouseList.productList
                if (list1 && list1.length) {list1.forEach((item, i) => {that.rules['warehouseList.' + i + '.factoryName'] = [{
                            required: true,
                            message: '请选择厂库',
                            trigger: 'change'
                        }]
                        that.rules['warehouseList.' + i + '.orderNumber'] = [{
                            required: true,
                            min: 1,
                            max: 20,
                            validator: (rule, value, callback) => {if (!value) {callback(new Error('订单号不能为空'))
                                } else if (value.length < 1 || value.length > 20) {callback(new Error('订单号请保持在 1 -20 字符内'))
                                } else {callback()
                                }
                            },
                            trigger: 'blur'
                        }]
                        that.rules['warehouseList.' + i + '.deliveryTime'] = [{
                            required: true,
                            message: '请选择日期',
                            trigger: 'blur'
                        }]

                        if (item.productList && item.productList.length) {item.productList.forEach((childItem, childIndex) => {that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productName'] = [{
                                    required: true,
                                    message: '请选择产品',
                                    trigger: 'change'
                                }]
                                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productNumber'] = [{
                                    required: true,
                                    min: 1,
                                    max: 20,
                                    validator: (rule, value, callback) => {if (!value) {callback(new Error('产品数量不能为空'))
                                        } else if (value.length < 1 || value.length > 20) {callback(new Error('产品数量请保持在 1 -20 字符内'))
                                        } else {callback()
                                        }
                                    },
                                    trigger: 'blur'
                                }]
                                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
                                    required: true,
                                    message: '请填写单价',
                                    trigger: 'blur'
                                }]
                            })
                        }
                    })
                }
            }

在组件创建时调用次方法就可以了。多层嵌套验证就搞定了，互不影响。

 最重要的一点就是 循环时 prop 内绑定的验证属性名 一定要和 model 绑定的值相对应上，循环嵌套过多的就需要一直往上层找，找到最上层元素