vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用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怎样做多层循环表单验证的介绍啦，本文代码具有一定的借鉴价值，有需要的朋友可以参考学习。最后，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中调用generator有几种方式，怎么实现

  不断调用generator对象的next()方法，执行generator代码，然后，每次遇到yieldx；返回一个对象，然后暂停。直接用for...of循环迭代generator对象，不需要自己判断done。

• JavaScript闭包的作用是什么，怎么应用

  这篇文章主要介绍了详解JavaScript闭包问题,通过案例一步步进行讲解了该项技术问题,讲述了变量的作用域,闭包的概念和作用,需要的朋友可以参考下

• 微信小程序实现Modal弹框的方法及过程是什么

  这篇文章主要为大家详细介绍了微信小程序自定义Modal弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript实现继承有多少方法，分别是哪些？

  目录一、背景简介二、原型对象和对象的关系二、使用 prototype 和 proto 实现继承三、使用prototype和proto实现继承四、通过原型链访问对象的方法和属性五、其他方式实现继

• jsconfig.json是什么，实际的应用及使用步骤是什么

  这篇文章主要介绍了vue项目中 jsconfig.json是什么,本文仅仅简单介绍了 jsconfig .json 的一些基本配置，而 jsconfig .json提供了大量能使我们快速便捷提高代码效率的方法，需要的朋友可以参考下