vue + el form Implementation of Multi Layer Loop Form Verification

html

<el-form :model="formObj" :rules="rules" ref="ruleForm">
 <el-form-item :label="' Configuration of nursing record items: '" label-width="180px">
  <template v-for="(formItem, index) in formObj.formDictExtendDoList">
   <div class="hljl-container" :key="formItem.id">
    <el-row>
     <el-col :span="8">
      <el-form-item
       :label="' Field name: '"
       label-width="90px"
       :rules="rules.fieldName"
       :prop="'formDictExtendDoList.'+index+'.fieldName'"
      >
       <el-input
        v-model.trim="formItem.fieldName"
        type="text"
        :clearable="true"
        maxLength="100"
        placeholder=" Please enter "
       />
       <!--@blur="isRepeat(formItem, index, 'fieldName')"-->
      </el-form-item>
     </el-col>
     <template
      v-for="(child, index1) in formItem.item"
      v-show="formItem.type === 2"
     >
      <el-col :span="8" :key="child.id">
       <el-form-item
        :label="' Options ' + (index1+1) + ' : '"
        label-width="90px"
        :rules="rules.value"
        :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
       >
        <el-input
         v-model.trim="child.value"
         @input="forceUpdate"
         :clearable="true"
         type="text"
         maxlength="20"
         placeholder=" Please enter "
        />
       </el-form-item>
      </el-col>
     </template>
    </el-row>
   </div>
  </template>
 </el-form-item>
</el-form>

js

let _THAT
export
default {
  name: 'formMangeAdd',
  data() {
    return {
      formObj: {
        formDictExtendDoList: []
      },
      rules: {
        fieldName: [{
          required: true,
          message: ' Please enter ',
          trigger: 'blur'
        }, {
          validator: this.itemValidator,
          trigger: 'blur'
        }],
        value: [{
          validator: (rule, value, callback) = > {
            // I'm a genius.
            let that = _THAT
            that.forceUpdate()
            let field = rule.field
            let arr = field.split('.')
            let index = +arr[1]
            let index1 = +arr[3]
            let _value = that.formObj.formDictExtendDoList[index].item[index1].value
            if (_value === '' || _value === null || _value === undefined) {
              callback(new Error(' Please enter '))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }
    }
  },
  beforeCreate() {
    _THAT = this
  },
  created() {
    //  Test data 
    let test = [{
      id: 'id_1595641858891',
      //  Only 1 Configure id
      fieldName: ' Field name ',
      //  Field name 
      item: []
    }, {
      id: 'id_1595641858892',
      //  Only 1 Configure id
      fieldName: ' Field name ',
      //  Field name 
      item: []
    }, {
      id: 'id_1595641858893',
      //  Only 1 Configure id
      fieldName: ' Field name ',
      //  Field name 
      item: [{
        id: 'item_id_1595641858891',
        //  Only 1id
        value: ' Options 1'
      }, {
        id: 'item_id_1595641858892',
        //  Only 1id
        value: ' Options 2'
      }]
    }]
    this.formObj.formDictExtendDoList = test
  },
  methods: {
    /**
     *  Repetitive judgment 
     **/
    itemValidator: (rule, value, callback) = > {
      let that = _THAT
      that.forceUpdate()
      let field = rule.field
      let ruleArr = field.split('.')
      let index = +ruleArr[1]
      let type = ruleArr[2]
      if (value === '') {
        callback()
        return false
      }
      let arr = []
      for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) {
        let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i]
        let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName
        let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName
        if (index !== i) {
          if (type === 'fieldName') {
            if (formDictExtendDoListFieldName !== '') {
              if (formDictExtendDoListFieldName === value) {
                arr.push(i)
              }
            }
          }
        }
      }
      if (arr.length !== 0) {
        if (type === 'fieldName') {
          callback(new Error(' And configuration ' + (+arr[0] + 1) + ' Duplicate field name of '))
          setTimeout(function() {
            that.formObj.formDictExtendDoList[index].fieldName = ''
          }, 500)
        }
      } else {
        callback()
      }
    },
    forceUpdate() {
      this.$forceUpdate()
    }
  }
}

The above is vue + el-form implementation of the multi-layer loop form validation details, more information about vue form validation please pay attention to other related articles on this site!