相信很多正在用 element-ui 元件的同學，都會用到過 el-form 表單元件，這個元件幫助我們完成了表單驗證和表單提交功能，但是在用的時候，會發現一些不方便的地方，比如說驗證規則無法複用。
關於無法複用
比如說我的表單需要一個手機號格式驗證規則，如果我在一個頁面裡面使用了，我就在這個頁面裡面複製一遍這個規則，這個還好，但是如果我在專案中的另外一個頁面中，還要用到這個規則，還要複製一遍，這就讓人有些不開心了。而且接下來我要說的這個新包，它內建了很多常用的元件，可以很方便的直接使用
還有就是設定規則比較複雜，我們要使用一個規則的時候，需要在 el-form 元件上設定 rules, model 以及 ref 等屬性，還要在 el-form-item 上設定 prop ，而且這裡面有些是重複定義的變數，完全有優化的空間。而且內建的驗證規則太少。
最近一段時間，在 Google 上找到了這麼一款表單驗證元件，初步試用，發現很強大，很方便，我們都知道，表單驗證功能表單以及表單域的關聯比較緊密，需要考慮資料的雙向互通，以及錯誤資料的展示，要在已有的 element-ui 專案中，接入一個其他的專案來做，是很困難的，但是這款產品沒有這個問題，因為 VueFormulate 是支援外掛擴充套件的，首先它內建了一些比較漂亮的表單域，直接放在專案中也是沒問題的，另外它還可以擴充套件使用其他的表單域，比如說 element-ui 中的文字輸入框，數字輸入框，級聯選擇器等等。
更多內容，可以檢視 VueFormulate 的 中文文件 ，最近這段時間剛剛翻譯的。
融合 element-ui 和 VueFormulate
因為我們的專案就是用的 element-ui 開發的，為了保持風格統一，還要用到 VueFormulate 就需要這樣的一個外掛，所以我就開源了這樣一個外掛 formulat-el-ui，為了減少大家的使用困難，這個外掛是遵循語義化版本2.0 規範的。專案 github 地址 ,如果無法訪問，可以檢視 gitee
請相信我，它一定會提高你的表單開發效率的。
本作品採用《CC 協議》，轉載必須註明作者和本文連結