vue3+ant design的form数组表单校验方法
首先,先说说我要实现的内容:如下图,点“新增”会添加一个灰框内容,form表单是一个数组,一个灰框为一个对象,各对象保存时各自校验自己表单里的内容,互不干扰!

上页面代码(看部分代码就懂了):
<div v-for="(item,index) in formList" :key="index">
<a-form
ref="formRef"
:rules="rules"
:model="formList"
:label-col="{ style: { width: '130px' } }"
>
<a-row :gutter="[24, 24]">
<a-col :span="12">
<a-form-item
label="监控点位名称"
:name="[index,'name']"
v-bind="validateInfos.name"
>
<a-input
v-model:value.trim="item.name"
placeholder="请输入监控点位名称"
:maxLength="32"
autocomplete="off"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-button type="primary" @click="onSubmit(index)" class="mr">
<template #icon> <SaveOutlined /> </template>保存
</a-button>
</a-col>
<a-col :span="12">
<a-form-item
label="横截面积(平方米)"
:name="[index,'waterDevice','area']"
v-bind="validateInfos['waterDevice.area']"
>
<a-input-number
id="inputNumber"
v-model:value="item.waterDevice.area"
placeholder="请输入横截面积"
:min="0"
:max="999"
style="width: 319px;"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="废水桶高度(米)"
:name="[index,'waterDevice','height']"
v-bind="validateInfos['waterDevice.height']"
>
<a-input-number
id="inputNumber"
v-model:value="item.waterDevice.height"
placeholder="请输入废水桶高度"
:min="0"
:max="999"
style="width: 300px;"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>上JS 代码(vue3):

如果要清空校验信息,就加上resetFields , 业务没有用到,就不加到上面代码中了
引入
const { resetFields,validate,validateInfos } = useForm(formList, rules);
用法:
proxy.$refs.formRef[key].validate()到此这篇关于vue3+ant design的form数组表单,如何校验的文章就介绍到这了,更多相关vue3+ant design form数组表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下2018-11-11
vue使用el-upload上传文件及Feign服务间传递文件的方法
这篇文章主要介绍了vue使用el-upload上传文件及Feign服务间传递文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-03-03
vue cli3.0结合echarts3.0与地图的使用方法示例
这篇文章主要给大家介绍了关于vue cli3.0结合echarts3.0与地图的使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧2019-03-03
浅谈vue websocket nodeJS 进行实时通信踩到的坑
这篇文章主要介绍了浅谈vue websocket nodeJS 进行实时通信踩到的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)
这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容,需要的朋友可以参考下2022-12-12
vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下2021-08-08


最新评论