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


Posted in Vue.js onNovember 25, 2020

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 表单验证的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
MooTools 1.2介绍
2009/09/14 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Angular排序实例详解
2017/06/28 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
EM算法的python实现的方法步骤
2018/01/02 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
工作简历的自我评价
2019/05/16 职场文书
python状态机transitions库详解
2021/06/02 Python