vue實現多個el-form表單提交統一校驗的2個方法

目錄 1. 定義模板內容 2. 方法一 3. 方法二 總結 通過以下兩種方法實現多個表單的統一校驗： 1. 定義模板內容 在 el-form 表單中添加 ref 屬性來獲取表單組件對象 template div el-form ref="for

目錄

• 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表單提交統一校驗內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！