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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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 strrpos()与strripos()函数
2013/08/31 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript几个易错点记录
2014/11/26 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python仿抖音表白神器
2019/04/08 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python日志器使用方法及原理解析
2020/09/27 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
python中os.remove()用法及注意事项
2021/01/31 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
C#笔试题
2015/07/14 面试题
加拿大留学自荐信
2014/01/28 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
学校就业推荐信范文
2014/05/19 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
陕西导游词
2015/02/04 职场文书
前台岗位职责范本
2015/04/16 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
股权投资协议书
2016/03/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书