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

html

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 表单验证的资料请关注考高分网其它相关文章！