如何解決vue+elementUI復雜表單的驗證、數據提交方案問題

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

當我們在做后臺管理系統時，經常會遇到非常復雜的表單：

• 表單項非常多

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

• 在某些條件下，某些表單項會關閉驗證

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

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

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

方案1： 在一個 vue 文件中

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

v-if/v-show
elementui

缺點

• 亂

• 亂

• 還是亂

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

• 在我嘗試加入一種新的表單類型時，我發現我已經無。從。下。手。

方案2：分離組件

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

1. 子組件

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

(1) validate 方法

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

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

(2) getData 方法

提供子組件中的數據

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

2. 父組件

(1)策略模式

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

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

(2) submit 方法

用于父子組件表單驗證、獲取整體數據、調用當前類型提交函數提交數據

因為 elementUI 表單驗證的 validate 方法可以返回 promise 結果 ，可以利用 promise 的特性來處理父子表單的驗證。 比如 then 函數可以返回另一個 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 => {
 // 全部驗證通過
 // 獲取整體數據
 const reqData = {
 // 獲取子組件數據
 ...this.$refs[templateType].getData(),
 ...this.indexForm
 };
 // 獲取當前表單類型的提交函數，并提交
 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 => {
 // 都通過時，發送請求
 const reqData = {
 ...this.$refs[templateType].getData(),
 ...this.indexForm
 };
 this.typeSubmitMap[this.indexForm.type](reqData);
 })
 .catch(err => {
 console.log(err);
 });
},

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