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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue如何在data中引入图片的正确路径
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执行批量mysql语句的解决方法
2013/05/02 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python基于opencv实现人脸识别
2021/01/04 Python
python实现简单文件读写函数
2021/02/25 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
英语专业毕业生自荐信
2013/10/28 职场文书
管理心得体会
2013/12/28 职场文书
《白鹅》教学反思
2014/04/13 职场文书
后备干部培训方案
2014/05/22 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python