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

Gretchen ·

更新时间:2024-09-20

· 908 次阅读

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

VUE form表单校验方法 form表单提交 form

1024 个赞