快捷導(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è)方法,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

在 el-form 表單中添加 ref 屬性來(lái)獲取表單組件對(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ù)組用來(lái)存儲(chǔ)所有表單的 ref 值
      formRefs: [ 'form1', 'form2' ],
      form1: {},
      form2: {},
      rules1: {},
      rules2: {}
    }
  },
  methods: {
    submit() {
     // 標(biāo)記所有表單是否通過(guò)校驗(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)通過(guò)，執(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)文章

element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫(kù)的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue緩存的keepalive頁(yè)面刷新數(shù)據(jù)的方法
這篇文章主要介紹了vue緩存的keepalive頁(yè)面刷新數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧~
2020-09-09
Vue表單驗(yàn)證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形，這篇文章主要介紹了Vue表單驗(yàn)證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下
2023-09-09
vue實(shí)現(xiàn)二維碼掃碼功能(帶樣式)
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧
2021-08-08
詳解vue的數(shù)據(jù)binding綁定原理
這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
Vue使用pdf.js和docx-preview實(shí)現(xiàn)docx和pdf的在線預(yù)覽
這篇文章主要為大家詳細(xì)介紹了在Vue中使用pdf.js和docx-preview實(shí)現(xiàn)docx和pdf的在線預(yù)覽的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),需要的可以參考下
2025-03-03
詳解vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案
這篇文章主要介紹了vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
一文詳解Vue中過(guò)濾器filters的使用
Vue.js允許自定義過(guò)濾器，過(guò)濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會(huì)改變），本文主要來(lái)和大家講講過(guò)濾器filters的使用，感興趣的可以了解一下
2023-04-04
vue中常用的rules驗(yàn)證方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10