elementui 表單公共方法驗證 二

2021-08-30 11:09:46 字數 676 閱讀 3693

專案中有了乙個公共的表單驗證後,隨著需求的深入,會有不同的輸入要求,比如a頁面的『name』要求字元只能中文與校驗字串長度,b頁面的則需要必錄加校驗字串長度以及中文。

仔細觀察可以看到rules取的都是乙個物件陣列,可以是乙個,可以是多個,只要是物件陣列並符合寫法就能正確校驗,所以我們只需要寫乙個公共校驗即可。根據多數制定規則,個例根據需求賦值即可。

公共校驗

這裡是如何提取校驗集結成公共方法的文章

定製校驗

//a頁面--只校驗中文及字元長度

//b頁面--全部校驗

//公共校驗

common: ,,]

}

此方法在乙個完整的form表單中應用是一樣的,上面的**也是我從裡面摘出來的個例。每個form內的表單都能指定rules,只要寫準prop指向。就能通過this.$refs[formname].validate((valid) => })校驗。

聯動驗證

eg:選擇身份證時,姓名欄只允許輸入中文,選擇其他證件時,僅校驗字串長度。idtype==『0』 時為身份證。

elementui 表單公共方法驗證

做專案時會涉及到很多表單,前台的表單驗證就必不可少,很多公共的驗證,比如 手機號 日期 身份證等,一套寫下來也很費時間,完全可以寫個公共方法common去校驗,vue檔案通過 rules rules.common 呼叫。新建規則 common rules index.js 建議工程目錄中建立comm...

element ui表單驗證

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

element ui 表單校驗

一 最普通的驗證 html model ruleform rules rules ref ruleform label width 100px class demo ruleform 名稱 prop name v model ruleform.name el input el form item e...