elementui 表單公共方法驗證

做專案時會涉及到很多表單，前台的表單驗證就必不可少，很多公共的驗證，比如：手機號、日期、身份證等，一套寫下來也很費時間，完全可以寫個公共方法common去校驗，.vue檔案通過:rules='$rules.common'呼叫。

新建規則：common> rules>index.js

建議工程目錄中建立common資料夾，存放公共呼叫的檔案，比如驗證方法。

用驗證手機號舉例：

const validatephone = (rule, value, callback) => $");//簡單驗證11位手機號

if (!patter.test(value)) else 
};export default ,]
}

export default ,]

}, activity:,]
}, //更多...
}

import rules from "./common/rules";

vue.prototype.$rules = rules;

*.vue 呼叫

驗證form，注意prop、rules指定的名字需一致：

測試

這裡可以看下總結的集中elementui表單驗證的寫法。

elementui 表單公共方法驗證 二

專案中有了乙個公共的表單驗證後，隨著需求的深入，會有不同的輸入要求，比如a頁面的 name 要求字元只能中文與校驗字串長度,b頁面的則需要必錄加校驗字串長度以及中文。仔細觀察可以看到rules取的都是乙個物件陣列，可以是乙個，可以是多個，只要是物件陣列並符合寫法就能正確校驗，所以我們只需要寫乙個公共...

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...