vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能如何實(shí)現(xiàn)

今天小編給大家分享一下vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能如何實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

vue動(dòng)態(tài)添加表單validateField驗(yàn)證，代碼如下所示：

<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <div v-for="(input, index) in inputs" :key="index">
        <el-form-item :label="'Name ' + (index + 1)" :prop="'name' + index">
          <el-input v-model="input.name" @blur="validateName(index)"></el-input>
        </el-form-item>
        <el-form-item :label="'Age ' + (index + 1)" :prop="'age' + index">
          <el-input v-model.number="input.age" @blur="validateAge(index)"></el-input>
        </el-form-item>
      </div>
      <el-button type="primary" @click="addInput">Add input</el-button>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form>
  </template>

  <script>
  export default {
    data() {
      return {
        form: {},
        inputs: [{name: '',age: ''}],
        rules: {
            name0: { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' },
            age0: { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' },
        }
      }
    },
    methods: {
      addInput() {
        const index = this.inputs.length
        this.inputs.push({ name: '', age: '' })
        this.$set(this.form, `name${index}`, '')
        this.$set(this.form, `age${index}`, '')
        this.$set(this.rules, `name${index}`, { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' })
        this.$set(this.rules, `age${index}`, { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' })
      },
      validateName(index) {
        this.$refs.form.validateField(`name${index}`)
      },
      validateAge(index) {
        this.$refs.form.validateField(`age${index}`)
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // submit form
          } else {
            console.log('validation failed')
          }
        })
      }
    }
  }
  </script>

可以使用 Element UI 的表單組件結(jié)合 Vue 的動(dòng)態(tài)組件來(lái)實(shí)現(xiàn)動(dòng)態(tài)添加多組輸入框，并對(duì)每個(gè)輸入框進(jìn)行校驗(yàn)。Element UI 提供了很多內(nèi)置的校驗(yàn)規(guī)則和提示信息，可以方便地應(yīng)用到表單中。

首先，我們需要在 Vue 實(shí)例中聲明一個(gè) inputs 數(shù)組來(lái)存儲(chǔ)每個(gè)輸入組的數(shù)據(jù)。在添加輸入組時(shí)，我們只需要向 inputs 數(shù)組中添加一個(gè)新的對(duì)象即可。

在模板中，我們使用 Element UI 的表單組件來(lái)渲染輸入框，并使用 v-for 指令循環(huán)渲染多組輸入框。在每個(gè)輸入框中，我們使用 v-model 指令將輸入值綁定到 inputs 數(shù)組中的數(shù)據(jù)屬性上。對(duì)于 name 和 age 輸入框，我們使用 pattern 規(guī)則來(lái)進(jìn)行校驗(yàn)，并在 rules 對(duì)象中提供了相應(yīng)的錯(cuò)誤提示信息。在 checkNameInput 和 checkAgeInput 方法中，我們調(diào)用 $refs.form.validateField 方法來(lái)手動(dòng)觸發(fā)校驗(yàn)，并將當(dāng)前輸入對(duì)象作為參數(shù)傳遞進(jìn)去。

最后，我們需要在 Vue 實(shí)例中聲明一個(gè) form 對(duì)象來(lái)維護(hù)表單數(shù)據(jù)，并將 rules 對(duì)象傳遞給 el-form 組件的 rules 屬性。這樣，每次輸入框的值發(fā)生變化時(shí)，就會(huì)自動(dòng)觸發(fā) Element UI 的校驗(yàn)機(jī)制，并顯示相應(yīng)的錯(cuò)誤提示信息。

補(bǔ)充：vue動(dòng)態(tài)表單添加表單驗(yàn)證

            <el-form ref="conditionListForm" :rules="ConditionListRules" :model="scope.row.conditionListForm">
              <el-table
                ref="conditionListDia"
                :data="scope.row.conditionListForm.conditionListDia"
                border
                :header-cell-
                
                size="mini"
              >
                <el-table-column label="限制條件名稱" align="center">
                  <el-table-column
                    label="條件組合"
                    align="center"
                    size="mini"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionRelation' " :rules="ConditionListRules.conditionRelation">
                        <el-select
                          v-model="scopeChild.row.conditionRelation"
                          :disabled="scope.row.conditionListForm.conditionListDia.length > 1 || scope.row.id > 0"
                          size="mini"
                          placeholder="請(qǐng)選擇"
                          clearable
                          
                          @change="showconditionRelation(scopeChild.row.conditionRelation)"
                        >
                          <el-option
                            v-for="item in compositionConditionList"
                            :key="item.key"
                            :disabled="item.baseDataStatus==='0'"
                            :label="item.label"
                            :value="item.key"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="條件分組"
                    size="mini"
                    align="center"
                    min-width="30"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].medalConditionClassname' " :rules="ConditionListRules.medalConditionClassname">
                        <el-select
                          v-model="scopeChild.row.medalConditionClassname"
                          :disabled="scope.row.id > 0"
                          size="mini"
                          placeholder="請(qǐng)選擇"
                          clearable
                          
                          @change="defDataClick(scopeChild)"
                        >
                          <el-option
                            v-for="item in fatherNameList"
                            :key="item.id"
                            :label="item.medalConditionClassname"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="條件"
                    size="mini"
                    align="center"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionId' " :rules="ConditionListRules.conditionId">
                        <el-select
                          v-model="scopeChild.row.conditionId"
                          size="mini"
                          :disabled="scope.row.id > 0"
                          placeholder="請(qǐng)選擇"
                          clearable
                          
                          @change="getRelationship(scopeChild.row.conditionId,scopeChild.row.medalConditionClassnameList,scopeChild.row)"
                        >
                          <el-option
                            v-for="item in scopeChild.row.medalConditionClassnameList"
                            :key="item.defId"
                            :label="item.medalConditionName"
                            :value="item.defId"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="運(yùn)算關(guān)系"
                  align="center"
                  size="mini"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionOperation' " :rules="ConditionListRules.conditionOperation">
                      <el-select
                        v-model="scopeChild.row.conditionOperation"
                        size="mini"
                        placeholder="請(qǐng)選擇"
                        :disabled="scope.row.id > 0"
                        clearable
                        
                        @change="conditionOperationEmpty(scopeChild.row)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionOperationValueList"
                          :key="item.key"
                          :disabled="item.baseDataStatus==='0'"
                          :label="item.value"
                          :value="item.key"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="值"
                  align="center"
                  size="mini"
                  min-width="120"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '0'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-select
                        v-model="scopeChild.row.conditionTrueValueList"
                        multiple
                        
                        size="mini"
                        clearable
                        placeholder="請(qǐng)選擇"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '1'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input
                        v-model="scopeChild.row.conditionValue"
                        clearable
                        placeholder="請(qǐng)輸入"
                        align="center"
                        
                        size="mini"
                        maxlength="60"
                        show-word-limit
                        @blur="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '2'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-date-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="開(kāi)始日期"
                        size="mini"
                        end-placeholder="結(jié)束日期"
                        
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '3'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-select
                        v-model="scopeChild.row.conditionValue"
                        
                        size="mini"
                        clearable
                        placeholder="請(qǐng)選擇"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '4'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-time-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        
                        size="mini"
                        is-range
                        clearable
                        range-separator="至"
                        start-placeholder="開(kāi)始時(shí)間"
                        end-placeholder="結(jié)束時(shí)間"
                        placeholder="選擇時(shí)間范圍"
                        format="HH:mm"
                        @change="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '5'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input-number v-model="scopeChild.row.conditionValue" size="mini" :min="0" label="" @change="conditionValueEmpty(scope)" />
                    </el-form-item>

                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-button type="text" :disabled="scope.row.id > 0" @click="delCondition(scope.$index,scope.row.conditionListForm.conditionListDia,scopeChild.row,scopeChild.$index)">刪除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
 ConditionListRules: {
    conditionRelation: [
      { required: true, message: '條件組合不能為空', trigger: 'change' }
    ],
    medalConditionClassname: [
      { required: true, message: '條件分組不能為空', trigger: 'change' }
    ],
    conditionId: [
      { required: true, message: '條件不能為空', trigger: 'change' }
    ],
    conditionOperation: [
      { required: true, message: '運(yùn)算關(guān)系不能為空', trigger: 'change' }
    ],
    conditionValue: [
      { required: true, message: '值不能為空', trigger: 'change' }
    ],
    conditionTrueValueList: [
      { required: true, message: '值不能為空', trigger: 'change' }
    ]
  },

主要就是prop的問(wèn)題，prop要對(duì)應(yīng)到數(shù)據(jù)。

以上就是“vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。