vue3+ant design的form数组表单校验方法

 更新时间:2023年09月27日 09:21:55   作者:八月十五圆又圆  
这篇文章主要介绍了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数组表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3 ts打包失败ts类型校验未通过导致打包失败的解决方案

    vue3 ts打包失败ts类型校验未通过导致打包失败的解决方案

    这篇文章主要介绍了vue3 ts打包失败ts类型校验未通过导致打包失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • 基于Vue框架vux组件库实现上拉刷新功能

    基于Vue框架vux组件库实现上拉刷新功能

    这篇文章主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue组件间传值的实现解析

    Vue组件间传值的实现解析

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,这篇文章主要介绍了Vue组件间传值的实现
    2022-09-09
  • vue+el-select 多数据分页搜索组件的实现

    vue+el-select 多数据分页搜索组件的实现

    本文主要介绍了vue+el-select 多数据分页搜索组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • 详解VUE2.X过滤器的使用方法

    详解VUE2.X过滤器的使用方法

    本篇文章主要介绍了详解VUE2.X过滤器的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue3+elementui plus创建项目的方法

    Vue3+elementui plus创建项目的方法

    这篇文章主要介绍了Vue3+elementui plus创建项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 详解Vue项目中如何解决组件之间的循环依赖

    详解Vue项目中如何解决组件之间的循环依赖

    在大型 Vue 项目中,组件之间的关系可能会变得非常复杂,甚至会出现循环依赖的问题,本文将通过通俗易懂的方式,讲解如何在 Vue 中解决组件之间的循环依赖问题,希望对大家有所帮助
    2024-11-11
  • Vue3配置路由ERROR in [eslint]报错问题及解决

    Vue3配置路由ERROR in [eslint]报错问题及解决

    这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 通过命令行生成vue项目框架的方法

    通过命令行生成vue项目框架的方法

    本篇文章主要介绍了通过命令行生成vue项目框架的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 使用Webpack提高Vue.js应用的方式汇总(四种)

    使用Webpack提高Vue.js应用的方式汇总(四种)

    Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用,需要的的朋友参考下吧
    2017-07-07

最新评论