表單實現原理（Vue ElementUI）

本文地址：https://www.cnblogs.com/veinyin/p/12640071.html

1.1 表單構成

表單由三部分構成

• form（綁定表單數據，校驗規則，提供validate方法）

• formItem（進行數據校驗，展示錯誤提示）

• Input等（數據雙向綁定，數據變化時通知formItem校驗）

1.2 Input 實現

數據雙向綁定

• :value="value" 綁定 value

• @input 監聽 input 事件，並將輸入值 emit 出去即實現數據雙向綁定

輸入內容變化時通知 formItem 進行校驗

input 中 this.$parent.$emit("validate", value)

1.3 FormItem 實現

formItem 主要做的就是對數據進行校驗以及展示提示信息，校驗借助async-validator庫

1.3.1 校驗原理

通過從form中獲取的校驗規則，從input中獲取的輸入值，自身上綁定的prop值三者，實現校驗邏輯

• 獲取rules：可以通過this.$parent 獲取rules， 也可以通過provide，inject獲取rules

• 獲取輸入值：input 中已經emit 出來了，只需要在formItem 的 created 中$on響應即可，this.$on('validate', value)

• prop值是通過props直接傳遞進來的，用於讀取rules的關鍵字

1.3.2 validate 方法實現

借助async-validator庫，我們需要

1. 實例化一個描述器，用來表明校驗關鍵字及校驗規則

2. 實例化一個schema，作為校驗器，執行它的validate方法

3. 傳入校驗內容和校驗之后執行的回調，回調中根據校驗狀態修改是否展示提示信息，修改樣式等

由於需要在form實例中暴露一個validate方法，用於判斷整個表單是否校驗通過，因此需要額外處理一下，將上面方法體包在Promise中，resolve校驗結果

在組件 created 鈎子中， 發現該表單項需要校驗，則將整個this對象暴露給父組件

1.4 Form 實現

接收兩個參數，一個是rules，用於formItem中獲取校驗規則，另一個是modal，用於整個表單校驗時獲取表單數據

在formItem中暴露了需要校驗的實例對象，在form中接收這些對象，並存儲起來

在form中也要實現一個validate方法，用於校驗所有需要校驗的表單項，並將校驗結果暴露出去

1. 首先我們拿到了所有需要校驗的實力對象，遍歷並執行他們的校驗方法之后可以得到所有的promise對象

2. promise.all 執行這些 promise 對象，可以得到校驗結果數組

3. 對全部通過時通過校驗，否則校驗失敗。執行回調函數，把校驗結果通過回調參數暴露出去

1.5 代碼實現

完成簡單示例，表單項僅實現input，倉庫地址：

https://github.com/yinyuhui/form