如何将Vue中多个el-form表单提交统一校验的两种方法合并为一个长尾？

本文共计528个文字，预计阅读时间需要3分钟。

目录

1.定义模板内容

2.方法一

3.方法二

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

1. 定义模板内容在el-form表格中添加ref属性来获取表单组件对象

template div el-form ref=formRef el-form-item label=字段1 prop=field1 el-form-item label=字段2 prop=field2 ...其他字段 div

目录

• 1. 定义模板内容
• 2. 方法一
• 3. 方法二
• 总结

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

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表单提交统一校验内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！