vue：elementui中el-form之多层数组的表单校验

已于 2023-04-18 09:35:35 修改
阅读量2.9k 收藏 5
点赞数 1
文章标签： javascript html vue.js
于 2023-04-17 16:03:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kjhytfh/article/details/130195675
版权
本文介绍了在Vue.js使用ElementUI时如何进行复杂的表单验证，特别是针对包含多层数组的数据结构。通过实例展示了页面展示、数据结构设计以及HTML部分的实现，包括动态添加和删除表单元素，以及如何在prop中拼接以实现动态校验规则。
摘要由CSDN通过智能技术生成

vue：elementui中el-form之多层数组的表单校验

文章目录

前言

内容主要是记录一下自己在开发过程中遇到的一些问题，普通的表单校验elementUI官方文档已经很详细了，但针对复杂的数据结构，就需要拓展，以下及供参考。。。

一、页面展示（实现功能最终展示效果）

在这里插入图片描述

二、数据结构：

      formData: {
        forms: [{
          uniques: [],
          form_name:'',
          prices:[{
              course_type: null,
              money: 0,
              content: '',
              written_no_pass_refund_money: 0,
              interview_no_pass_refund_money: 0,
              written_pass_pay_money: 0,
              interview_pass_pay_money: 0,
              interview_day_num: 0,
              party_a_id: '',
              party_a_name: '',
              contract_id: '',
              contract_name: '',
              interview_course_days: 0,
            }]
          }]
          }

三、html部分展示：

        <el-card class="box-card" shadow="never">
          <div slot="header">
            <b>第四步: 表单设置</b>
          </div>
          <el-form :model="formData" label-width="auto" ref="ValidateForm" label-position="left" size="medium">
            <el-card class="item" v-for="(formIt,i) in formData.forms" :key="i" style="width:100%;display: flex;margin-bottom: 20px;">
              <el-row>
                <el-col :span="7">
                  <el-form-item :label="formIt.uniques.length > 1 ? '绑定组合班级':'绑定班级'" :prop="'forms.' + i + '.uniques'" :rules="rules.uniques">
                    <el-select @change="selectClasses" class="widthSet" multiple v-model="formIt.uniques" filterable placeholder="请选择课程类型" no-data-text="请完善班级信息后再试" style="width:14vw;margin-left: 5px;">
                      <el-option v-for="item in formData.classes.filter(x=>x.class_name)" :key="item.uuid" :label="item.class_name" :value="item.uuid"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item :label="formIt.uniques.length > 1 ? '组合班级名称':'班级名称'" :prop="'forms.' + i + '.form_name'" :rules="rules.form_name">
                    <el-input v-model="formIt.form_name" type="text" style="width:14vw;margin-left: 5px;" placeholder="请输入班名"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <p>合同与价格</p>
              <el-card v-for="(it, index) in formIt.prices" :key="index" style="width:100%;display: flex;margin-bottom: 20px;border: 1px dashed #ccc;" shadow="never">
                <div class="leftCon">
                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="课程班型(笔试/面试)" :prop="'forms.'+ i +'.prices.' + index + '.course_type'" :rules="rules.course_type">
                      <el-select class="widthSet" v-model="it.course_type" filterable placeholder="请选择课程类型" style="width:14vw;margin-left: 5px;" @change="courseTypeChane($event, index,i)">
                        <el-option v-for="item in typeList" :key="item.course_type" :label="item.course_type_name" :value="item.course_type"/>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">
                    <el-form-item :label="moneyLabel(it)" :prop="'forms.'+ i +'.prices.' + index + '.money'" :rules="rules.money">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" v-model="it.money" :min="0" style="width:14vw;margin-left: 5px;"/>
                    </el-form-item>

                    <el-form-item class="widthSet" label="价格描述" :prop="'forms.'+ i +'.prices.' + index + '.content'" :rules="rules.content">
                      <el-input class="widthSet" v-model="it.content" type="textarea" :rows="1" placeholder="举例:先交5800,上岸补交20000" style="width:14vw;margin-left: 5px;"/>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">

                    <el-form-item label="笔试未通过退款(元)" :prop="'forms.'+ i +'.prices.' + index + '.written_no_pass_refund_money'" :rules="rules.written_no_pass_refund_money" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.written_no_pass_refund_money"/>
                    </el-form-item>

                    <el-form-item label="笔试通过补交(元)" :prop="'forms.'+ i +'.prices.' + index + '.written_pass_pay_money'" :rules="rules.written_pass_pay_money" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.written_pass_pay_money"/>
                    </el-form-item>
                  </div>
                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="面试未通过退款(元)" :prop="'forms.'+ i +'.prices.' + index + '.interview_no_pass_refund_money'" :rules="rules.interview_no_pass_refund_money" v-if="it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_no_pass_refund_money"/>
                    </el-form-item>

                    <el-form-item label="面试通过补交(元)"
                                  :prop="'forms.'+ i +'.prices.' + index + '.interview_pass_pay_money'" :rules="rules.interview_pass_pay_money" v-if="it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                      <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_pass_pay_money"/>
                    </el-form-item>
                  </div>
                  <el-form-item label="面试天数(天)" :prop="'forms.'+ i +'.prices.' + index + '.interview_day_num'" :rules="rules.interview_day_num" v-if="it.course_type === 8 || it.course_type === 9 || it.course_type === 3 || it.course_type === 6 || it.course_type === 4 || it.course_type === 7">
                    <el-input-number :controls="false" class="widthSet el-input-number-align-left" :min="0" style="width:14vw;margin-left: 5px;" v-model="it.interview_day_num"/>
                  </el-form-item>

                  <div class="bos_z" style="display:flex;">
                    <el-form-item label="甲方" :prop="'forms.'+ i +'.prices.' + index + '.party_a_id'" :rules="rules.party_a_id" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 3 || it.course_type === 6 || it.course_type === 7 || it.course_type === 4 || it.course_type === 10 || it.course_type === 11">
                      <el-select class="widthSet" v-model="it.party_a_id" clearable filterable placeholder="请选择甲方" style="width:14vw;margin-left: 5px;" @change="selectPartA($event, index,i)">
                        <el-option v-for="v in courseOptions" :key="v.branch_id" :label="v.branch_name" :value="v.branch_id"/>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="合同" :prop="'forms.'+ i +'.prices.' + index + '.contract_id'" :rules="rules.contract_id" v-if="it.course_type === 2 || it.course_type === 5 || it.course_type === 3 || it.course_type === 6 || it.course_type === 7 || it.course_type === 4 || it.course_type === 10 || it.course_type === 11">
                      <el-select class="widthSet" v-model="it.contract_id" clearable filterable placeholder="请选择合同" style="width:14vw;margin-left: 5px;" @change="selectContract($event, index,i)">
                        <el-option v-for="agree in it.agreementList" :key="agree.stencil_id" :label="agree.stencil_name" :value="agree.stencil_id"/>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="rightCon">
                  <el-button @click="addCourse(i)" v-if="index === formData.forms[i].prices.length - 1" style="margin: auto 10px" type="success" plain>继续添加合同与价格
                  </el-button>
                  <el-button @click="delCourse(i,index)" v-if="formData.forms[i].prices.length > 1" style="margin: auto 10px" type="danger" plain>删除当前合同与价格
                  </el-button>
                </div>
              </el-card>


              <div class="rightCon">
                <el-button @click="addCombinedClass" v-if="i === formData.forms.length - 1"
                           style="margin: auto 10px" type="success" plain>继续添加表单
                </el-button>
                <el-button @click="delCombinedClass(i)" v-if="formData.forms.length > 1"
                           style="margin: auto 10px" type="danger" plain>删除当前表单
                </el-button>
              </div>
            </el-card>

          </el-form>
        </el-card>

总结

重点在于:prop中拼接
在这里插入图片描述

你眼里有光呀
关注
vue2表单校验：el-form表单绑定数组并使用rules进行校验
l_q_l的专栏
08-17 3780
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3634
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
elementui数组表单验证
最新发布
WQ的技术分享
09-24 401
ElementUI-多层数据的表单验证
cookie-y的博客
03-14 1036
ElementUi表单
vue elementUI 表单校验（多层嵌套）
weixin_34087503的博客
04-13 3898
嵌套对象的校验 项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。 elementUI对表单的校验有自己的方法，要求传入model的必须为一个对象...
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
02-12 5631
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
el-form的rules如何校验多层嵌套对象
玛已的小空间
05-13 8421
el-form的表单校验，通常情况下，都是在校验第一层对象时使用 例如： <el-form ref="form" :model="postData" :rules="rules" class="common-form" label-width="118px" size="mini"> <el-row> <el-col :span="12"> <el-form-item prop="custType" label="客户属性">
Practice Leetcode 152. 乘积最大子数组
刘烟火的博客
10-25 192
给你一个整数数组 nums ，请你找出数组中乘积最大的连续子数组（该子数组中至少包含一个数字），并返回该子数组所对应的乘积。 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6。 示例 2: 输入: [-2,0,-1] 输出: 0 解释: 结果不能为 2, 因为 [-2,-1] 不是子数组。 来源：力扣（LeetCode） 链接：https://leetcode-cn.com/problems/maximum-product-subarray 思路1： clas
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
ElementUI中 el-form 表单面向 多层嵌套数据(实体类或数组) 的校验 validate 异常解决
_
04-22 6490
感谢这篇文章的提示，按照ElementUI官网，对于单层或者两层结构的数据，el-form 表单很容易地在el-form-item的prop属性绑定对应model中的字段，即可完成校验 validate 。但是对于多层嵌套数据(实体类或数组)，诸如以下结构： data1: { field11: '', field12: '', data2: { fi...
vue elementUI 表单校验（多层嵌套）【转载】
qq_30819871的博客
03-26 1444
在对多层嵌套表单进行表单校验的时候，遇到了一点坑，转载一篇亲测成功的教程供大家欣赏 原文地址：https://segmentfault.com/a/1190000014366951 嵌套对象的校验 项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。 elementUI对表单的校验有自己的方法，要求传入model的必须
vue-form-json:通过数组验证生成Vue表单
04-29
vue-form-json 验证生成Vue表单 所有字段都是必填字段，默认情况下输入文本。 提交后，将在$ root上发出带有formName和所有值的事件“ formSubmitted”。 特征 从数组生成表单（formFields属性） 默认情况下，布尔玛类（可以覆盖） React灵敏 倍数列上的字段const formFields = [ [ { label : 'label one' } , { label : 'label two' } ] ] 预填值const formFields = [ { label : 'the label' , value : 'the value' } ] const formFields = [ { label : 'the label' , rules : { is_not : 'label' } } ] 跨字段验证（请参阅CodeSa
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
在前端开发中，表单校验是一个重要环节，它能够保证用户提交的数据符合预期的格式，从而提高数据的准确性和安全性。Vue.js作为一套流行的前端框架，通过Element UI这个UI库，为开发者提供了丰富的表单组件和校验功能...
el-form 多重表单验证
青崖梦
01-16 527
el-form 多重表单验证
Web前端之Element的form校验、表单、嵌套、多层
CSDN博客主页地址：https://mengjian.blog.csdn.net/
08-08 752
Web前端之Element的form校验、表单、嵌套、多层
vue elementUI 表单校验（数组多层嵌套）
qq_1016371234的博客
09-09 5675
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", "ompany": "su
使用element的from组件同时对多个表单进行校验
weixin_56663184的博客
10-11 2154
element多个表单同时校验
element-ui中表单多选一验证
sky___Show的博客
05-17 282
【代码】element-ui中表单多选一验证。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值