### Vue3 多个 Form 表单校验的方法 对于多个表单的校验，在Vue3环境中可以通过组合`ref`和异步函数来实现复杂的多表单验证逻辑。当涉及到多步骤或多实例表单时，确保每个表单都有唯一的引用名以便单独访问其API方法。 #### 使用 `ref` 获取表单组件实例并执行校验 为了能够对不同表单进行独立或联合校验，需先给每一个需要被校验的 `<el-form>` 或其他形式的表单标签设置独特的`ref`属性[^1]： ```html <template> <div id="app"> <!-- 第一个表单 --> <el-form ref="formOne" :model="formDataOne" :rules="rulesOne"> ... </el-form> <!-- 第二个表单 --> <el-form ref="formTwo" :model="formDataTwo" :rules="rulesTwo"> ... </el-form> <button @click="submitForms">Submit</button> </div> </template> ``` #### 定义数据模型与规则对象 为两个表单分别准备对应的数据绑定(`:model`)及校验规则(`:rules`)，这允许各自拥有特定于自身的业务逻辑约束[^2]： ```javascript <script setup> import { reactive, ref } from 'vue'; const formDataOne = reactive({ // 表单一的数据结构 }); const rulesOne = { // 表单一的校验规则 }; const formDataTwo = reactive({ // 表单二的数据结构 }); const rulesTwo = { // 表单二的校验规则 }; </script> ``` #### 创建提交处理函数 编写用于触发所有目标表单校验的过程，并收集它们的结果以判断是否继续流程。这里利用Promise.all等待全部完成后再做进一步动作[^3]: ```javascript <script setup> // ... 上述代码省略 ... async function submitForms() { try { const tasks = [ formOne.value.validate(), formTwo.value.validate() ]; await Promise.all(tasks); console.log('All forms are valid'); // 执行后续操作，比如发送HTTP请求等 } catch (errors) { console.error('Some forms failed validation', errors); } } </script> ``` 此方案不仅适用于静态定义好的几个表单，也支持动态生成的情况——只要保证每次新增加的表单都赋予独一无二的`ref`名称即可。