實現elementUI表單的全域性驗證

2021-09-24 08:15:20 字數 1109 閱讀 6263

使用elementui搭建框架的時候，大家應該都有考慮過怎麼做全域性驗證，畢竟複製貼上什麼的是最煩了，這裡分享下個人的解決方法。

一般驗證規則，主要是是否必填，不為空，以及引數型別的驗證。 基於這個條件，我們開始找找思路, 單個欄位的驗證是這樣的：

name: 


複製**
固定的規則。當乙個東西固定之後，那必然是可以重複使用的，並且可以快速生成，我們可以用迴圈來實現它。 但是用迴圈來實現，我們則需要乙個資料規則。

定義資料規則

分析下需要的字段，大概就是以下幾種，其他的可以根據自身的需求去增加：

那最終我們得到的是這樣乙個字段配置列表:

fieldlist: [,,


,,,,


,,,]


複製**
form完整的字段配置建議參考：

forminfo: ,


fieldlist: [,,


,,,,


,,,],


rules: {},


labelwidth: '120px'


}複製**
實現驗證方法
export default (fieldlist) => 


// 迴圈字段列表


for (const item of fieldlist) 


} else 


}} else


if (item.validator) 


}}  // forminfo.rules = obj


return obj


}複製**
結合上面的字段設計，我在頁面上的使用是這樣的，大家可以根據自己的字段設計去修改，大致實現過程是這樣的, 將初始化規則掛在了全域性，vue.prototype.$initrules

// 初始化驗證


initrules


() 複製**
在專案的系統管理模組中可以看到示例**：

專案位址

專案**位址

如果沒有自己的驗證函式，這個或許可以幫到你:

從0開始，編寫乙個驗證函式

elementUI的表單校驗

參考 使用 只需要通過rules屬性傳入約定的驗證規則，並將 form item 的prop屬性設定為需校驗的欄位名即可。校驗規則參見 async validator 1.在from表單上配置屬性rules 2.資料模型中編寫校驗規則 pageformrules templateid pagenam...

element UI 表單的使用

這裡就不貼 了，官網也差不多都有，就簡述一下這次所用所涉及的引數。1.在 form 元件中，每乙個表單域由乙個 form item 元件構成，表單域中可以放置各種型別的表單控制項，包括 input select checkbox radio switch datepicker timepicker。...

element ui表單驗證

可以在pattern中書寫正則，並且配合elementui進行表單驗證。pattern 屬性規定用於驗證輸入欄位的模式。模式指的是正規表示式。rules message 以字母開頭，長度在2 5之間，只能包含字元 數字和下劃線 password message 只能輸入6 20個字母 數字 下劃線 ...