vue3+ant design的form数组表单校验方法
作者：八月十五圆又圆
这篇文章主要介绍了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数组表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！