做專案時會涉及到很多表單，前台的表單驗證就必不可少，很多公共的驗證，比如：手機號、日期、身份證等，一套寫下來也很費時間，完全可以寫個公共方法common去校驗，.vue檔案通過:rules='$rules.common'呼叫。
新建規則：common> rules>index.js
建議工程目錄中建立common資料夾，存放公共呼叫的檔案，比如驗證方法。
用驗證手機號舉例：
上面的export default內可以分類填寫驗證，更便於管理，可以按照頁面或者功能分類，看個人喜好了：const validatephone = (rule, value, callback) => $");//簡單驗證11位手機號if (!patter.test(value)) else
};export default ,]
}
掛載：main.js引入rulesexport default ,]}, activity:,]
}, //更多...
}
掛載到vue上，這樣我們就可以在單檔案例項中通過import rules from "./common/rules";
vue.prototype.$rules = rules;
$rules來呼叫需要的驗證了。
*.vue 呼叫
驗證form，注意prop、rules指定的名字需一致：
也可以單獨指定具體某一驗證：
測試
:rules="$rules.login.username"
elementui表單驗證的幾種方法
這裡可以看下總結的集中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...