vue实现多个el-form表单提交统一校验

通过以下两种方法实现多个表单的统一校验：

1. 定义模板内容

在 el-form 表单中添加 ref 属性来获取表单组件对象

<template><div><el-formref="form1":rules="rules1"><!-- 表单内容 --></el-form><el-formref="form2":rules="rules2"><!-- 表单内容 --></el-form><el-button@click="submit">提交</el-button></div></template>

2. 方法一

在上述代码中，我们给每个 el-form 表单添加了 ref 属性，分别为 form1 和 form2，在 submit 方法中，分别对两个表单使用 validate 方法进行表单校验

exportdefault{data(){return{form1:{},form2:{},rules1:{},rules2:{}}},methods:{submit(){const form1Valid =this.$refs.form1.validate()const form2Valid =this.$refs.form2.validate()if(form1Valid && form2Valid){// 统一提交表单}}}}

3. 方法二

在上述代码中，我们给每个 el-form 表单添加了 ref 属性，在 submit 方法中，遍历 formRefs 表单数组，依次对每个表单进行校验

exportdefault{data(){return{// 数组用来存储所有表单的 ref 值formRefs:['form1','form2'],form1:{},form2:{},rules1:{},rules2:{}}},methods:{submit(){// 标记所有表单是否通过校验的变量let isValid =true// 遍历表单数组，依次对每个表单进行校验this.formRefs.forEach(ref=>{this.$refs[ref].validate(valid=>{if(!valid){
                 isValid =false}})}}// 如果所有表单都校验通过，执行提交操作if(isValid){// 执行提交操作}}}}