快捷導(dǎo)航

vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法

更新時(shí)間：2023年07月12日 11:00:11 作者：穿貂_

這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 定義模板內(nèi)容

在 el-form 表單中添加 ref 屬性來獲取表單組件對(duì)象

<template>
  <div>
    <el-form ref="form1" :rules="rules1">
      <!-- 表單內(nèi)容 -->
    </el-form>
    <el-form ref="form2" :rules="rules2">
      <!-- 表單內(nèi)容 -->
    </el-form>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

2. 方法一

在上述代碼中，我們給每個(gè) el-form 表單添加了 ref 屬性，分別為 form1 和 form2，在 submit 方法中，分別對(duì)兩個(gè)表單使用 validate 方法進(jìn)行表單校驗(yàn)

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) {
        // 統(tǒng)一提交表單
      }
    }
  }
}

3. 方法二

在上述代碼中，我們給每個(gè) el-form 表單添加了 ref 屬性，在 submit 方法中，遍歷 formRefs 表單數(shù)組，依次對(duì)每個(gè)表單進(jìn)行校驗(yàn)

export default {
  data() {
    return {
      // 數(shù)組用來存儲(chǔ)所有表單的 ref 值
      formRefs: [ 'form1', 'form2' ],
      form1: {},
      form2: {},
      rules1: {},
      rules2: {}
    }
  },
  methods: {
    submit() {
     // 標(biāo)記所有表單是否通過校驗(yàn)的變量
     let isValid = true
     // 遍歷表單數(shù)組，依次對(duì)每個(gè)表單進(jìn)行校驗(yàn)
     this.formRefs.forEach(ref => {
     	this.$refs[ref].validate(valid => {
     		if (!valid) {
     			isValid = false
     		}
     	})
     }}
     // 如果所有表單都校驗(yàn)通過，執(zhí)行提交操作
     if (isValid) {
     	// 執(zhí)行提交操作
     }
    }
  }
}

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法的文章就介紹到這了,更多相關(guān)vue el-form表單提交統(tǒng)一校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue鍵盤事件keyup、keydown的作用
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue組件暴露和.js文件暴露接口操作
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例
今天小編就為大家分享一篇Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue中如何使用math.js
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善
2024-09-09
Vue0.1的過濾代碼如何添加到Vue2.0直接使用
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式及 this.$store undefined的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Element Alert警告的具體使用方法
這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07