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 表单验证的资料请关注脚本之家其它相关文章！