Vue动态生成的表格中嵌套表单的多表单校验

最新推荐文章于 2024-03-31 10:04:26 发布
最新推荐文章于 2024-03-31 10:04:26 发布
阅读量679 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37669507/article/details/107914183
版权

为表单formData绑定data数据加入’ref’字段,使每个数据列的ref都不相同(因为ref不同才能全部校验到，ref相同的话最后一列的校验结果会覆盖前面的，会使得前面校验不通过也能执行方法)，在el-form中绑定ref

:ref="scope.row.ref"

在这里插入图片描述
我在自己写的数据处理中加入了ref字段
在这里插入图片描述

派小欣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue elementUI 表单校验功能之数组多层嵌套
12-08
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", "ompany": "sunt mollit", "address": "anim reprehenderit aliquip labore velit"
Ant-Design-Vue中，a-form-model嵌套table，并且支持动态添加输入框还支持表单校验
JerryAnDBun的博客
03-22 5307
在这里，form的属性则是word和type这两个数组，又因为我有许多输入框，我用的是数组来对应那些输入框。所以prop应该是动态的，（每个输入框的prop不一样嘛），则写出了:prop="`word[${index}]`"。我设计的form叫addForm，里面的word和type是个数组，专门存对应的数据。每需要添加一行就往table的datasource里添加一个空数据站位字，使得表格多出一行，而重点是如何准确的获取每一行的数据并且监听和校验呢？最终效果如下图，没填的会报空，填了的则正常。
【实战分享】解决Vue3中多表单同时提交的数据验证问题，一次搞定！
最新发布
weixin_45333006的博客
03-31 649
页面由三个tabs切换的表单数据，包括各种计算逻辑等复杂的交互，但是三个表单数据需要同时填写完成后，一并提交，使用到component动态组件。
嵌套多层的表单 表格内表单元素校验 和 表格行拖拽
2301_76607997的博客
03-27 193
vue2+element-ui+动态表格校验
form嵌套table表单验证
Xiaochen1239的博客
01-15 606
table嵌套form表单验证
ant-design-vue 实现表格内字段校验并在提交时进行校验
m0_57263648的博客
11-17 1719
/a-table>在上面的示例中，我们使用了组件来包裹输入框，并设置了和:help属性来控制校验状态和提示信息。我们在上绑定了和，这两个方法用于返回校验状态。根据校验状态的不同，可以为添加不同的样式类，例如'is-valid'和，然后在 CSS 中定义相应的样式。我们在:help上绑定了和，这两个方法用于返回提示信息。根据校验状态的不同，可以返回不同的提示信息，在下方显示。methods: {// 校验行数据if (!// 行数据无效，显示错误提示。
在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证
shiyutim
07-05 5520
在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证 文章目录在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证设置响应式属性表单验证 设置响应式属性 在 Vue 中，只有在跟级别中创建的属性，才具有响应式，如果后期手动添加，如使用 this.xxx = xxx这种方式创建的属性是不具有响应式的。 在 Vue里面，封装了 7 个方法，使用如下的方法来添加属性，同样可以创建响应式属性，并触发视图更新： push() pop() shift() unshift() spl
vue 表单对象里还有对象，多层嵌套校验，制定校验规则
qiao_qiao_happy的博客
12-23 4052
vue表单多层嵌套验证 Form 表单 表单数据通过 :model 绑定是 formValidate 验证规则通过 :rules绑定ruleValidata 在对formValidate.slurm_kwargs内层的gpulist 进行验证时, 直接给prop=‘xxx’ 然后在ruleValidata里对应是无法验证的 需要在prop处写到上一层slurm_kwargs.gpulist 然后在ruleValidata里 使用 'slurm_kwargs.gpulist ’ 绑定验证 ...
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套
lpfhjw的博客
10-24 4167
antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题 嵌套 TS 表单验证失效
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue+ element ui 表单验证有值但验证失败问题
01-19
一.如图：有值但是验证失败 二. 数据模板 prop=template> 请输入数据模板 readonly=true> export default { data()
antd-vue + vue3 实现a-table动态增减行，通过a-from实现a-table行内输入验证， form嵌套两个table实现检验。
hello word
11-08 2298
antd-vue + vue3 实现a-table动态增减行，通过a-from实现a-table行内输入验证
Vue项目 table中嵌套form指定校验
qq_46344419的博客
11-27 675
Vue项目 table中嵌套form指定校验
vue一个界面有两个form表单如何进行校验
那一日面朝大海的博客
04-15 5117
可利用Promise异步控制 const rule1 = new Promise((resolve,reject) => { this.$refs['xuForm'].validate(valid => { if(valid){ resolve() }else{ ...
Vue3 element-plus表单嵌套表格实现动态表单验证
路虽远，行则必至！
08-01 6309
rules对应data rules对象，prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）prop的关键就在于下标 $index。
Vue3.0 — element-plus 表单嵌套表格实现动态表单验证【实战】
热门推荐
Z.Dragon 的博客
04-10 1万+
我想有不少小伙伴都有遇到过表单嵌套表格，那么在这种情况下怎么实现动态验证呢？（即表单项可以动态添加/删除） 效果图如下 表格有添加和删除按钮，点击提交进行表单验证 element官方有给出表单动态验证的方法，但是实际上大多数项目的需求无法满足，所以需要在其基础上进行修改 首先data格式必须是对象包裹数组 forms: { tableData: [] } 然后表单绑定form数据 <el-form ref="forms" :model="forms"> 表格绑定tableData数据
vue+element，form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则
minmin_web的博客
12-28 4823
动态嵌套校验的难点主要是如何绑定prop属性，自定义方法的难点主要是如何在嵌套的基础上设置自定义方法以及如何将v-for的索引传入校验
antdesginVue2.0 +ts +vue3.0 表格套表单 动态绑定校验
我只是个很菜的前端
08-18 585
vantdesgin2.0 +ts +vue3.0 表格套表单 动态绑定校验
vue生成动态表单校验
07-12
在Vue中生成动态表单校验可以使用Vue的表单校验插件，如Vuelidate或vee-validate。以下是使用Vuelidate的示例： 首先，安装Vuelidate： ```bash npm install vuelidate ``` 然后，在Vue组件中引入Vuelidate： ```javascript import { required, minLength } from 'vuelidate/lib/validators'; export default { data() { return { formData: { // 表单数据 } }; }, validations: { formData: { // 表单数据的校验规则 field1: { required, // 必填项校验 }, field2: { minLength: minLength(5), // 最小长度校验 }, // 更多字段的校验规则... } }, methods: { submitForm() { this.$v.$touch(); // 触发表单校验 if (!this.$v.$invalid) { // 校验通过，提交表单 } } } }; ``` 在表单中，使用`v-model`指令绑定表单数据，并在需要校验的表单元素上使用`v-validate`指令指定校验规则： ```html <template> <form @submit.prevent="submitForm"> <input v-model="formData.field1" v-validate="'required'" type="text" placeholder="Field 1"> <span v-if="$v.formData.field1.$error">Field 1 is required.</span> <input v-model="formData.field2" v-validate="'minLength:5'" type="text" placeholder="Field 2"> <span v-if="$v.formData.field2.$error">Field 2 must have at least 5 characters.</span> <button type="submit">Submit</button> </form> </template> ``` 在上述示例中，`validations`对象定义了表单数据的校验规则。`v-validate`指令用于指定校验规则，可以传递一个字符串参数，也可以传递一个对象参数来指定更多的校验规则。 在提交表单时，可以使用`$v.$touch()`来触发表单校验，然后通过`$v.$invalid`检查校验结果，如果校验通过，可以继续提交表单。 这样，通过Vuelidate插件，你可以方便地生成动态表单校验。当然，也可以使用其他类似的表单校验插件来实现类似的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值