vue  element UIフォームネスト検証の実例コード

一：フォームの一段階検証
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であるべきです。循環して出てくるので、モデルバインディングは「item.factoryName」です。
prop内にバインディングされた検証属性名が対応しない場合、コンソールは一般的に次のエラーを報告します。
 
三：循環ネストループのフォーム検証
例えば、こうです。

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内のバインディングの値は、第1層の循環時の親要素warehousseListと一緒にinput内に書かれているバインディングのmodel値を記入する必要があります。
：prop=「'warehouse seList.'+index+'.productList.'+item Index+'.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バインディングの値に対応していなければならず、ループネストが多すぎるものはずっと上の階に探して、一番上の要素を見つけなければなりません。
締め括りをつける
以上は小编が皆さんに绍介したvue＋element UIフォームの入れ子検证です。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。