（element-ui）v-for动态数据循环表单验证的处理

最新推荐文章于 2024-09-14 18:11:30 发布

置顶

奘倥城

最新推荐文章于 2024-09-14 18:11:30 发布

阅读量1.8k

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45178761/article/details/105404621

版权

本文介绍了在Vue项目中使用Element UI组件库进行动态表单验证的方法，特别是针对用v-for循环生成的表单项。通过设置动态的prop如`:prop="`List. + index + `.startDate"`，并结合data中的rules规则，实现每个循环内表单元素的验证。遵循官方文档的表单验证API，可以在提交时通过form的validate方法确保所有动态生成的表单项都符合验证规则。

摘要由CSDN通过智能技术生成

1.功能需求

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？

首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。

如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？

2.Dom结构如下（重点）

表单验证的时候：

1：prop改为：prop，形式为’List.’+index+’.startDate’
2：List.’+index+’.startDate就是数据结构与数据
3：每一个循环中的都需要加：rules

 <el-form :model="resumes"
                 size="mini"
                 :rules="rules"
                 ref="resumes">
            <div v-for="(item, index) in resumes.List" :key="index">
                <el-form-item label="开始时间："