快捷導(dǎo)航

vue elementUI 表單嵌套驗(yàn)證的實(shí)例代碼

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

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

一：表單一級(jí)驗(yàn)證

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

簡(jiǎn)單的表單驗(yàn)證很簡(jiǎn)單，在prop內(nèi)綁定驗(yàn)證屬性，然后在rules對(duì)象內(nèi)定義驗(yàn)證方法

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

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

<el-row v-for="(item, index) in form.warehouseList" :key="index">
  <el-col :span="21">
    <el-form-item label="廠庫(kù)名稱:" 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)模板驗(yàn)證prop綁定值就是一個(gè)問題了，因?yàn)樗茄h(huán)出來的沒辦法直接寫死在內(nèi)，所以prop就需要?jiǎng)討B(tài)綁定驗(yàn)證屬性，這里需要注意一下，動(dòng)態(tài)prop內(nèi)綁定的是要和form內(nèi)定義的屬性名以及model綁定的值要對(duì)應(yīng)上。比如上面prop里的factoryName，form.warehouseList里子元素也要有這個(gè)屬性，select中model綁定的也應(yīng)該是factoryName。因?yàn)槭茄h(huán)出來的，所以model綁定的就是‘item.factoryName'。

如果prop內(nèi)綁定的驗(yàn)證屬性名對(duì)應(yīng)不上，控制臺(tái)一般都會(huì)報(bào)下面這個(gè)錯(cuò)誤

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

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

比如說是這種：

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

要是需要監(jiān)聽productList中的productNumber，并且進(jìn)行驗(yàn)證，這就是第三層的驗(yà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)時(shí)的父元素warehouseList一并寫上一直寫到input內(nèi)綁定的model值

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

驗(yàn)證方法：

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: '請(qǐng)選擇廠庫(kù)',
              trigger: 'change'
            }]
            that.rules['warehouseList.' + i + '.orderNumber'] = [{
              required: true,
              min: 1,
              max: 20,
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error('訂單號(hào)不能為空'))
                } else if (value.length < 1 || value.length > 20) {
                  callback(new Error('訂單號(hào)請(qǐng)保持在1-20字符內(nèi)'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }]
            that.rules['warehouseList.' + i + '.deliveryTime'] = [{
              required: true,
              message: '請(qǐng)選擇日期',
              trigger: 'blur'
            }]

            if (item.productList && item.productList.length) {
              item.productList.forEach((childItem, childIndex) => {
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productName'] = [{
                  required: true,
                  message: '請(qǐng)選擇產(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ù)量請(qǐng)保持在1-20字符內(nèi)'))
                    } else {
                      callback()
                    }
                  },
                  trigger: 'blur'
                }]
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
                  required: true,
                  message: '請(qǐng)?zhí)顚憜蝺r(jià)',
                  trigger: 'blur'
                }]
              })
            }
          })
        }
      }

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

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

總結(jié)

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

您可能感興趣的文章: