vue + el-form 实现的多层循环表单验证

html

<el-form :model=\"formObj\" :rules=\"rules\" ref=\"ruleForm\">
 <el-form-item :label=\"\'护理记录项目配置：\'\" 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=\"\'字段名称：\'\"
       label-width=\"90px\"
       :rules=\"rules.fieldName\"
       :prop=\"\'formDictExtendDoList.\'+index+\'.fieldName\'\"
      >
       <el-input
        v-model.trim=\"formItem.fieldName\"
        type=\"text\"
        :clearable=\"true\"
        maxLength=\"100\"
        placeholder=\"请输入\"
       />
       <!--@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=\"\'选项\' + (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=\"请输入\"
        />
       </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: \'请输入\',
          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(\'请输入\'))
            } else {
              callback()
            }
          },
          trigger: \'blur\'
        }]
      }
    }
  },
  beforeCreate() {
    _THAT = this
  },
  created() {
    // 测试数据
    let test = [{
      id: \'id_1595641858891\',
      // 唯一配置id
      fieldName: \'字段名称\',
      // 字段名称
      item: []
    }, {
      id: \'id_1595641858892\',
      // 唯一配置id
      fieldName: \'字段名称\',
      // 字段名称
      item: []
    }, {
      id: \'id_1595641858893\',
      // 唯一配置id
      fieldName: \'字段名称\',
      // 字段名称
      item: [{
        id: \'item_id_1595641858891\',
        // 唯一id
        value: \'选项1\'
      }, {
        id: \'item_id_1595641858892\',
        // 唯一id
        value: \'选项2\'
      }]
    }]
    this.formObj.formDictExtendDoList = test
  },
  methods: {
    /**
     * 重复性判断
     **/
    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(\'与配置\' + (+arr[0] + 1) + \'的字段名称重复\'))
          setTimeout(function() {
            that.formObj.formDictExtendDoList[index].fieldName = \'\'
          }, 500)
        }
      } else {
        callback()
      }
    },
    forceUpdate() {
      this.$forceUpdate()
    }
  }
}

以上就是vue + el-form 实现的多层循环表单验证的详细内容，更多关于vue 表单验证的资料请关注其它相关文章！