vue3+ant design的form数组表单,如何校验

  • vue3+ant design的form数组表单,如何校验已关闭评论
  • 78 次浏览
  • A+
所属分类:Web前端
摘要

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

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

vue3+ant design的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):

vue3+ant design的form数组表单,如何校验

 

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

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

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