记录--VUE3+TS+Antd循环表单验证

会自己走的CV码农

已于 2024-05-24 10:17:52 修改

阅读量691

点赞数 2

分类专栏：记录文章标签：前端 vue 表单验证

于 2023-02-27 14:37:11 首次发布

本文链接：https://blog.csdn.net/weixin_41611635/article/details/129241436

版权

记录专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在Vue.js中，为了进行行内验证，表单组件的name属性需设为数组形式，特别是当有循环或嵌套结构时。通过使用[index,value]这样的命名方式，可以确保每个表单项的唯一性，支持blur和change触发的验证规则。

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

此方法使用在行内验证

要使用表单验证必须设置name，但是循环表单的name是一致的所以需要使用到下标值，且name设置为数组，如下：

<a-form
 :model="form_data"
 autocomplete="off"
 :label-col="{ style: { width: '90px' } }"
 >
	<a-form-item
                v-for="(item, index) in form_data"
                :key="si"
                :name="['form_data', index, 'value']"
                label="xxx"
                :rules="[
                  {
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
      </a-form-item>
</a-form>

如果有多层嵌套也适用，name需要调整