vue实现多个el-form表单提交统一校验的2个方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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) {
// 执行提交操作
}
}
}
}




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:26 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)