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綁定的值相對應上，循環嵌套過多的就須要一直往上層找，找到最上層元素