vue实现多个el-form表单提交统一校验的2个方法
作者：穿貂_
这篇文章主要给大家介绍了关于vue实现多个el-form表单提交统一校验的2个方法,文中通过代码示例介绍的非常详细,对大家学习或使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
通过以下两种方法实现多个表单的统一校验：
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) {
// 执行提交操作
}
}
}
}总结
到此这篇关于vue实现多个el-form表单提交统一校验的2个方法的文章就介绍到这了,更多相关vue el-form表单提交统一校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！