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 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue特效之翻牌动画
Apr 20 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python变量和字符串详解
2017/04/29 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
年级组长自我鉴定
2014/02/22 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python