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

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

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

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

表單項(xiàng)非常多
在各種表單類型下，顯示不同的表單項(xiàng)
在某些條件下，某些表單項(xiàng)會(huì)關(guān)閉驗(yàn)證
每個(gè)表單項(xiàng)還會(huì)有其他自定義邏輯，比如輸入框可以插入模板變量、輸入字符數(shù)量顯示、圖片上傳并顯示、富文本。。。
在這種錯(cuò)綜復(fù)雜的情況下，完成表單的驗(yàn)證和提交
可以查看具體例子：例子中省略了很多瑣碎的功能，只保留整體的復(fù)雜表單框架，用于展示解決方案

方案1：在一個(gè) vue 文件中

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

v-if/v-show
elementui

缺點(diǎn)

亂
亂
還是亂
一個(gè) vue 文件，輕輕松松上 2000 行
在我嘗試加入一種新的表單類型時(shí)，我發(fā)現(xiàn)我已經(jīng)無。從。下。手。

方案2：分離組件

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

1. 子組件

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

(1) validate 方法

用于驗(yàn)證本身組件的表單項(xiàng)，并返回一個(gè) promise 對象

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

(2) getData 方法

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

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

2. 父組件

(1)策略模式

使用策略模式存儲(chǔ)并獲取子表單的 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 方法

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

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

父表單驗(yàn)證通過才會(huì)驗(yàn)證子表單，存在先后順序

// 父表單驗(yàn)證通過才會(huì)驗(yàn)證子表單，存在先后順序
submitForm() {
 const templateType = this.typeRefMap[this.indexForm.type];
 this.$refs["indexForm"]
 .validate()
 .then(res => {
 // 父表單驗(yàn)證成功后，驗(yàn)證子表單
 return this.$refs[templateType].vaildate();
 })
 .then(res => {
 // 全部驗(yàn)證通過
 // 獲取整體數(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);
 });
},

父表單，子表單一起驗(yàn)證

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

查看在線項(xiàng)目，項(xiàng)目github和組件代碼

總結(jié)

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

您可能感興趣的文章: