vue3+ant design的form数组表单,如何校验
  XLKIzVXX9Ruk 2023年11月01日 31 0
Vue

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

 

上页面代码(看部分代码就懂了):

 1 <div v-for="(item,index) in formList" :key="index">
 2         <a-form
 3           ref="formRef"
 4           :rules="rules"
 5           :model="formList"
 6           :label-col="{ style: { width: '130px' } }"
 7         >
 8           <a-row :gutter="[24, 24]">
 9             <a-col :span="12">
10               <a-form-item
11                 label="监控点位名称"
12                 :name="[index,'name']"
13                 v-bind="validateInfos.name"
14               >
15                 <a-input
16                   v-model:value.trim="item.name"
17                   placeholder="请输入监控点位名称"
18                   :maxLength="32"
19                   autocomplete="off"
20                 />
21               </a-form-item>
22             </a-col>
23             <a-col :span="12">
24               <a-button type="primary" @click="onSubmit(index)" class="mr">
25                 <template #icon> <SaveOutlined /> </template>保存
26               </a-button>
27             </a-col>
28             <a-col :span="12">
29               <a-form-item
30                 label="横截面积(平方米)"
31                 :name="[index,'waterDevice','area']"
32                 v-bind="validateInfos['waterDevice.area']"
33               >
34                 <a-input-number
35                   id="inputNumber"
36                   v-model:value="item.waterDevice.area"
37                   placeholder="请输入横截面积"
38                   :min="0"
39                   :max="999"
40                   style="width: 319px;"
41                 />
42               </a-form-item>
43             </a-col>
44             <a-col :span="12">
45               <a-form-item
46                 label="废水桶高度(米)"
47                 :name="[index,'waterDevice','height']"
48                 v-bind="validateInfos['waterDevice.height']"
49               >
50                 <a-input-number
51                   id="inputNumber"
52                   v-model:value="item.waterDevice.height"
53                   placeholder="请输入废水桶高度"
54                   :min="0"
55                   :max="999"
56                   style="width: 300px;"
57                 />
58               </a-form-item>
59             </a-col>
60           </a-row>
61         </a-form>
62       </div>

上JS 代码(vue3):

 

如果要清空校验信息,就加上  resetFields ,  业务没有用到,就不加到上面代码中了

引入
const { resetFields,validate,validateInfos } = useForm(formList, rules);

用法:
proxy.$refs.formRef[key].resetFields()

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  JZjRRktyDDvK   19天前   37   0   0 Vue
  onf2Mh1AWJAW   4天前   13   0   0 Vue
XLKIzVXX9Ruk