Vue 多表单联合校验

一、背景

在实际开发中，会遇到分步表单或分部表单导致表单元素不在一个form内。本篇文章记录一下我是如何解决这个问题的。

• 环境：Vue3、AntdV

二、解决问题

• 如果一个总表单表单被分为了n个form，每个form可以设置同样的formData、formRule属性。
• 一个formRef不可被多个form使用，每个form应当设置一个独立的formRef。
• 多个表单同时验证使用同步验证，每个同步验证返回boolean值。

三、代码示例

<template>
    <!-- 第一部分 -->
    <a-form ref="formRef1" :model="formData" :rules="formRules" layout="vertical">
        <a-form-item label="" name="name"> </a-form-item>
        <a-form-item label="" name="sex"> </a-form-item>
    </a-form>

    <!-- 第二部分 -->
    <a-form ref="formRef2" :model="formData" :rules="formRules" layout="vertical">
        <a-form-item label="" name="age"> </a-form-item>
        <a-form-item label="" name="hoppy"> </a-form-item>
        
        <a-form-item>
            <a-button @click="handleResetForm">重置</a-button>
            <a-button @click="handleSubmitForm">保存</a-button>
        </a-form-item>
    </a-form>
</template>

<script setup>
const formData = ref({})
const formRef1 = ref()
const formRef2 = ref()
const formRules = {...}

const handleSubmitForm = () => {
    let formValid1 = await formRef1.value.validateFields()
    let formValid2 = await formRef2.value.validateFields()
    // 验证成功
    if (formValid1&&formValid2) {
        // 提交表单
    }
}

const handleResetForm = () => {
    formRef.value.resetFields();
}
<script>

说明：

本示例介绍了一个表单分成了2个form，但同样可以达到操作一个form的效果，需要注意的是，多个form标签的属性ref、model、rules需要一致。