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.0+ts引入详细步骤以及语法校验报错问题解决办法

    vue3.0+ts引入详细步骤以及语法校验报错问题解决办法

    Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成,下面这篇文章主要给大家介绍了关于vue3.0+ts引入详细步骤以及语法校验报错问题的解决办法,需要的朋友可以参考下
    2024-01-01
  • 关于echarts 清空上一次加载的数据问题

    关于echarts 清空上一次加载的数据问题

    这篇文章主要介绍了关于echarts 清空上一次加载的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue绑定的点击事件阻止冒泡的实例

    vue绑定的点击事件阻止冒泡的实例

    下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 在vue中使用jsx语法的使用方法

    在vue中使用jsx语法的使用方法

    这篇文章主要介绍了在vue中使用jsx语法的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解Vue进阶构造属性

    详解Vue进阶构造属性

    这篇文章主要介绍了Vue进阶构造属性,从4个方面来进行讲解:Directive、Mixin 混入、Extends 继承、provide 和 inject,感兴趣的小伙伴们,赶快来看一下
    2021-05-05
  • vue spa应用中的路由缓存问题与解决方案

    vue spa应用中的路由缓存问题与解决方案

    这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue中el-tree 横向滚动条的实现

    vue中el-tree 横向滚动条的实现

    本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下
    2024-09-09
  • vue中PC端地址跳转移动端的操作方法

    vue中PC端地址跳转移动端的操作方法

    最近小编接到一个项目pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面,下面小编给大家分享实现过程,一起看看吧
    2021-11-11
  • vue3项目+element-plus:时间选择器格式化方式

    vue3项目+element-plus:时间选择器格式化方式

    这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue .js绑定checkbox并获取、改变选中状态的实例

    vue .js绑定checkbox并获取、改变选中状态的实例

    今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论