目录
通过以下两种方法实现多个表单的统一校验：
1. 定义模板内容
在 el-form 表单中添加 ref 属性来获取表单组件对象
<template>
<div>
<el-form ref="form1" :rules="rules1">
<!-- 表单内容 -->
</el-form>
<el-form ref="form2" :rules="rules2">
<!-- 表单内容 -->
</el-form>
<el-button @click="submit">提交</el-button>
</div>
</template>
2. 方法一
在上述代码中，我们给每个 el-form 表单添加了 ref 属性，分别为 form1 和 form2，在 submit 方法中，分别对两个表单使用 validate 方法进行表单校验
export default {
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 表单数组，依次对每个表单进行校验
export default {
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) {
// 执行提交操作
}
}
}
}
