快捷導(dǎo)航

vue elementUI 表單嵌套驗證的實例代碼

更新時間：2019年11月06日 14:42:27 作者：enjoylife

這篇文章主要介紹了vue + elementUI 表單嵌套驗證,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

一：表單一級驗證

element中from組件內(nèi)表單驗證通過使用el-form標(biāo)簽，綁定model和rules屬性進(jìn)行表單驗證

<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內(nèi)綁定驗證屬性，然后在rules對象內(nèi)定義驗證方法

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

二：模板一次循環(huán)渲染時表單驗證

<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>

循環(huán)內(nèi)模板驗證prop綁定值就是一個問題了，因為它是循環(huán)出來的沒辦法直接寫死在內(nèi)，所以prop就需要動態(tài)綁定驗證屬性，這里需要注意一下，動態(tài)prop內(nèi)綁定的是要和form內(nèi)定義的屬性名以及model綁定的值要對應(yīng)上。比如上面prop里的factoryName，form.warehouseList里子元素也要有這個屬性，select中model綁定的也應(yīng)該是factoryName。因為是循環(huán)出來的，所以model綁定的就是‘item.factoryName'。

如果prop內(nèi)綁定的驗證屬性名對應(yīng)不上，控制臺一般都會報下面這個錯誤

![cuowu.png](/img/bVbzWSa)

三：循環(huán)嵌套循環(huán)的表單驗證

比如說是這種：

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

要是需要監(jiān)聽productList中的productNumber，并且進(jìn)行驗證，這就是第三層的驗證。

<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="數(shù)量:" label-width="60px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productNumber'">
    <el-input clearable v-model="itemChild.productNumber" placeholder="數(shù)量"></el-input>
   </el-form-item>
 </el-col>
</div>

prop內(nèi)綁定的值需要把第一層循環(huán)時的父元素warehouseList一并寫上一直寫到input內(nèi)綁定的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字符內(nèi)'))
                } 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: '請選擇產(chǎn)品',
                  trigger: 'change'
                }]
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productNumber'] = [{
                  required: true,
                  min: 1,
                  max: 20,
                  validator: (rule, value, callback) => {
                    if (!value) {
                      callback(new Error('產(chǎn)品數(shù)量不能為空'))
                    } else if (value.length < 1 || value.length > 20) {
                      callback(new Error('產(chǎn)品數(shù)量請保持在1-20字符內(nèi)'))
                    } else {
                      callback()
                    }
                  },
                  trigger: 'blur'
                }]
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
                  required: true,
                  message: '請?zhí)顚憜蝺r',
                  trigger: 'blur'
                }]
              })
            }
          })
        }
      }

在組件創(chuàng)建時調(diào)用次方法就可以了。多層嵌套驗證就搞定了，互不影響。

最重要的一點就是循環(huán)時prop內(nèi)綁定的驗證屬性名一定要和model綁定的值相對應(yīng)上，循環(huán)嵌套過多的就需要一直往上層找，找到最上層元素。

總結(jié)

以上所述是小編給大家介紹的vue + elementUI 表單嵌套驗證，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: