如何解決vue+elementUI復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題

小編給大家分享一下如何解決vue+elementUI復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

當我們在做后臺管理系統(tǒng)時，經(jīng)常會遇到非常復(fù)雜的表單：

• 表單項非常多

• 在各種表單類型下，顯示不同的表單項

• 在某些條件下，某些表單項會關(guān)閉驗證

• 每個表單項還會有其他自定義邏輯，比如 輸入框可以插入模板變量、輸入字符數(shù)量顯示、圖片上傳并顯示、富文本 。。。

• 在這種錯綜復(fù)雜的情況下，完成表單的驗證和提交

• 可以查看具體例子：例子中省略了很多瑣碎的功能，只保留整體的復(fù)雜表單框架，用于展示解決方案

方案1： 在一個 vue 文件中

所有的表單項顯示隱藏、驗證、數(shù)據(jù)獲取、提交、自定義等邏輯放在一起

v-if/v-show
elementui

缺點

• 亂

• 亂

• 還是亂

• 一個 vue 文件，輕輕松松上 2000 行

• 在我嘗試加入一種新的表單類型時，我發(fā)現(xiàn)我已經(jīng)無。從。下。手。

方案2：分離組件

其實很容易想到 根據(jù)不同的表單類型，分離出多個相應(yīng)類型的子表單 。但我在實踐時還是遇到了很多問題： 父子表單驗證、整體提交數(shù)據(jù)的獲取 等等，并總結(jié)出一套解決方案：

1. 子組件

所有的子組件中都需要包含兩個方法 validate 、 getData 供父組件調(diào)用。

(1) validate 方法

用于驗證本身組件的表單項，并返回一個 promise 對象

vaildate() {
 // 返回`elementUI`表單驗證的結(jié)果（為`promise`對象）
 return this.$refs["ruleForm"].validate();
},

(2) getData 方法

提供子組件中的數(shù)據(jù)

getData() {
 // 返回子組件的form
 return this.ruleForm;
},

2. 父組件

(1)策略模式

使用策略模式存儲并獲取 子表單的 ref (用于獲取子表單的方法)和 提交函數(shù) 。省略了大量的 if-else 判斷。

data:{
 // type和ref名稱的映射
 typeRefMap: {
 1: "message",
 2: "mail",
 3: "apppush"
 },
 // type和提交函數(shù)的映射。不同類型，接口可能不同
 typeSubmitMap: {
 1: data => alert(`短信模板創(chuàng)建成功${JSON.stringify(data)}`),
 2: data => alert(`郵件模板創(chuàng)建成功${JSON.stringify(data)}`),
 3: data => alert(`push模板創(chuàng)建成功${JSON.stringify(data)}`)
 },
}

(2) submit 方法

用于父子組件表單驗證、獲取整體數(shù)據(jù)、調(diào)用當前類型提交函數(shù)提交數(shù)據(jù)

因為 elementUI 表單驗證的 validate 方法可以返回 promise 結(jié)果 ，可以利用 promise 的特性來處理父子表單的驗證。 比如 then 函數(shù)可以返回另一個 promise 對象 、 catch 可以獲取它以上所有 then 的 reject 、 Promise.all 。

父表單驗證通過才會驗證子表單，存在先后順序

// 父表單驗證通過才會驗證子表單，存在先后順序
submitForm() {
 const templateType = this.typeRefMap[this.indexForm.type];
 this.$refs["indexForm"]
 .validate()
 .then(res => {
 // 父表單驗證成功后，驗證子表單
 return this.$refs[templateType].vaildate();
 })
 .then(res => {
 // 全部驗證通過
 // 獲取整體數(shù)據(jù)
 const reqData = {
 // 獲取子組件數(shù)據(jù)
 ...this.$refs[templateType].getData(),
 ...this.indexForm
 };
 // 獲取當前表單類型的提交函數(shù)，并提交
 this.typeSubmitMap[this.indexForm.type](reqData);
 })
 .catch(err => {
 console.log(err);
 });
},

父表單，子表單一起驗證

submitForm1() {
 const templateType = this.typeRefMap[this.indexForm.type];
 const validate1 = this.$refs["indexForm"].validate();
 const validate2 = this.$refs[templateType].vaildate();
 // 父子表單一起驗證
 Promise.all([validate1, validate2])
 .then(res => {
 // 都通過時，發(fā)送請求
 const reqData = {
 ...this.$refs[templateType].getData(),
 ...this.indexForm
 };
 this.typeSubmitMap[this.indexForm.type](reqData);
 })
 .catch(err => {
 console.log(err);
 });
},

看完了這篇文章，相信你對“如何解決vue+elementUI復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！