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

更新時間：2019年06月24日 11:19:28 作者：漓漾li

這篇文章主要介紹了vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

當(dāng)我們在做后臺管理系統(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)用當(dāng)前類型提交函數(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
 };
 // 獲取當(dāng)前表單類型的提交函數(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);
 });
},

查看在線項目，項目github和組件代碼

總結(jié)

以上所述是小編給大家介紹的vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: