【vue+elementui】v-for循环生成的表单项、动态生成的表单项的校验

最新推荐文章于 2024-06-14 11:07:57 发布
最新推荐文章于 2024-06-14 11:07:57 发布
阅读量3.2k 收藏 4
点赞数 2
分类专栏： elementUI vue 文章标签： vue elementui 表单验证 v-for验证 动态表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT429/article/details/112849057
版权

v-for循环生成的表单项、动态生成的表单项都有个特性，就是prop不确定，没有prop的话我们就无法像普通表单验证那样校验，所以我们要用:prop来校验。

语法：

:prop="`v-for绑定的数组.${v-for的索引}.v-model绑定的变量`"

示例如下：

<el-form :model="organForm" ref="organForm"
最低0.47元/天 解锁文章
小花花inhere
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件中通过v-for循环动态生成form表单进行表单校验
二三的博客
11-03 8599
在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图： 刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。 <a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol"> <div class="title"> <strong&
vue使用Element组件时v-for循环里的表单项验证方法
08-27
主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element UI 一键校验多表单（v-for循环表单，异步校验规则，v-for 中的 ref 属性，避坑 forEach 不支持异步 await ）
最新发布
朝阳39的博客
06-14 598
所以此例多表单的校验需改用 for 循环，通过 break 还可提前跳出 for 循环。通常，若两个元素 ref 属性相同，通过 this.$refs 只能获取到最终的元素。但在 v-for 中的 ref ，通过 this.$refs 得到的是一个数组。此处的接口是公共的免费接口，仅模拟效果，不必深究传参和返回。forEach 只支持同步，不支持异步。所以，此例中，获取第一个表单的方法是。
关于vue的UI框架Element，多层嵌套v-for循环下的表单验证
qq_26642611的博客
11-03 1663
以下为一层嵌套 <el-form-item v-for="(item,itemIndex) in form.button" :key="item.itemIndex" label="一级菜单" > <el-form-item :prop="'button.'+ itemIndex + '.name'" :rules="rules.inputTxt"> <el-input v-model="item.name" style="
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法
weixin_39277183的博客
08-08 3129
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法 项目开发时遇到form结构是动态遍历出来的，但是每个遍历出来的表单都需要做相对应的检验处理，ele提供的办法只能对单个表单有效，mou度很多方法都试了，但是都没有说出重点和要注意的地方！！！ 下面贴出我实现的代码： <el-form label-width="200px" class="dlrMode" ref="addInfo" :rules="DLRRules" :model="add
vue3 Element通过v-for循环渲染的form表单验证
山海也有意难平
11-01 3461
在我们的业务开发中，有时候会经常遇到动态v-for循环渲染出el-form-item，那么这些动态生成的el-form-item如何来进行表单验证 <el-form :model="accountFormDatas" :inline="true" ref="accountFormRef" label-width="120px" :rules="rulesTwo"> <div> <el-form-item label="RFID">
Vue动态生成form表单+校验
qq_25757181的博客
04-08 1万+
Vue动态生成form表单+校验
【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx
12-27
本文将深入探讨如何使用antd-vue和Vue实现动态验证循环属性的表单，满足以下需求： 1. **名称**、**对比项**和**备注**字段为必填项，初始默认为一行，支持用户添加多行。 2. 当**名称**更改时，自动清空当前行的**...
vue elementUI 表单校验功能之数组多层嵌套
10-16
通过灵活运用 `v-for` 循环和动态 `prop` 绑定，我们可以有效地处理数组多层嵌套的校验场景。在实际开发中，根据项目的具体需求和性能考虑，可以选择合适的方法。记住，良好的代码组织和清晰的逻辑是确保表单校验...
基于VueElementUI快速创建生成表单进行数据校验获取表单数据
08-10
为了实现动态生成表单，可以借助Vue的计算属性和循环结构。例如，如果你有一个JSON对象，描述了表单的结构，可以遍历这个对象来生成对应的表单组件： ```js data() { return { formFields: [ { type: "input", ...
VUE---基于element-ui 的动态表单
07-07
通过`v-for`循环遍历结构数据，结合`v-if`或`v-show`指令控制表单元素的显示与隐藏，从而实现动态渲染。 对于更复杂的动态表单，可能需要涉及表单的动态增删操作。Vue.js的事件机制可以帮助我们处理这些交互。例如...
Vue ElementUi动态表单(多个表单) 的校验及提交
热门推荐
weixin_34268843的博客
06-06 1万+
恳求sf的管理大大，不让驳回我的文章了，我是把文章的好多注释直接写到代码里边了，并不是文章太短 前言 有这么一个需求，根据登录用户的权限，页面上会动态显示几个表单,是的，独立的几个表单(就是有这样的需求)。这些动态的表单呢，样式都一样，都需要做校验，并且提交的时候，只能提交有权限且验证通过的表单线上demo:http://an888.ne...
vue表单 循环生成校验， 自定义校验规则，手动触发某条校验规则
shaoliao_qian的博客
09-03 6845
普通校验（具体直接看前端框架的官方文档就好了） formRules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ] }, 循环生成的form-item要校验 直接写在iten上面 <Form-item :label="'选项' + (index + 1)" v-for="(item,index) in dataForm.option" :rules="[{ required: true,me.
Element通过v-for循环渲染的form表单校验
前端踩坑之路
03-15 1万+
普通的form表单校验 日常业务开发中，对于中后台管理系统，form表单校验是一个很常见的问题。 查阅Element官方文档，我们了解到，form表单校验是这样的，需要给所校验的el-form-item添加prop属性值，这个属性值便就是当前元素v-model 所绑定的值。如图所示： v-for 循坏的表单校验 那么问题来了，通过v-for 遍历循环渲染的form表单怎么添加校验呢？主要问题就在...
v-for循环绑定
SanOrintea的博客
02-11 572
//绑到dataform.use1、dataform.use2、dataform.use3…… <div v-for="(item,index) in ['一','二','三','四','五','六']" v-bind:key="index"> <el-checkbox v-model="dataform[`use${index+1}`]">使用{{item}}号分区</el-checkbox> </div> ...
vue 动态添加 多项目 表单_使用Vue生成动态表单
weixin_39685836的博客
12-19 1041
开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提交的表单，以及对...
vue使用Element组件时v-for循环里的表单项验证
weixin_33743248的博客
06-27 1001
标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时...
记一次vue+elementUI页面添加动态表单
qq_37259691的博客
06-24 1269
首先，页面是这样的 当点击增加明细时，页面会新添加红色框中的内容。同时，会带有一个删除的按钮。 上图为点击增加明细后的效果图。 页面代码: <template> <div> <el-dialog :title = "title" :close-on-click-modal="false" :visible.sync="visible"> <div> <el-form :mod
vue3 el-form动态生成表单
05-21
使用 Vue3，我们可以通过渲染函数或者JSX来动态生成表单。下面是一个使用渲染函数的例子： ```html <template> <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px"> <el-form-item v-for="field in fields" :key="field.key" :label="field.label" :prop="field.key"> <el-input v-if="field.type === 'input'" v-model="form[field.key]" placeholder="请输入内容"></el-input> <el-select v-if="field.type === 'select'" v-model="form[field.key]" placeholder="请选择"> <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> <!-- 其他类型的表单项 --> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; export default { setup() { const fields = [ { label: '姓名', key: 'name', type: 'input' }, { label: '性别', key: 'gender', type: 'select', options: [ { label: '男', value: 'male' }, { label: '女', value: 'female' } ]}, // 其他表单项 ]; const form = ref({}); const rules = { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], gender: [{ required: true, message: '请选择性别', trigger: 'blur' }], // 其他表单项的校验规则 }; const submitForm = () => { // 提交表单的处理逻辑 }; return { fields, form, rules, submitForm, }; }, }; </script> ``` 这个例子中，我们定义了一个 `fields` 数组，里面包含了每个表单项的配置。根据 `fields` 数组中的配置生成表单，使用 `v-if` 根据不同的类型渲染不同的表单项。最后，我们把表单数据绑定到 `form` 对象上，使用 `ref` 把 `form` 对象变成响应式数据，这样在表单中输入数据时，`form` 对象也会自动更新。同时，我们还定义了表单项的校验规则，以及提交表单的处理逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值