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

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

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

const validatePhone = (rule, value, callback) => {
  let patter = new RegExp("^1[0-9]{10}$");//簡單驗證11位手機號
  if (!patter.test(value)) {
    return callback(new Error("請輸入正確格式的手機號！"));
  } else {
    callback();//必須有此項回撥，否則驗證會一直不通過
  }
};
export default { 
	mobilePhone:[{
      required: true,
       message: "手機號不能為空"
     },{
       validator: validatePhone,
       trigger: "blur",
       message: "請輸入正確的證件號"
     }]
}
 

上面的export default內可以分類填寫驗證，更便於管理，可以按照頁面或者功能分類，看個人喜好了：

export default { 
	common:{//公共驗證方法
		mobilePhone:[{
	      required: true,
	       message: "手機號不能為空"
	     },{
	       validator: validatePhone,
	       trigger: "blur"
	    }]
	},
	activity:{//活動策劃表單驗證
		name:[{
		   required: true,
	       message: "活動名稱不能為空"
		},{
			//...
		}]
	},
	//更多...
}
 

掛載：main.js引入rules

import rules from "./common/rules";
Vue.prototype.$rules = rules;

掛載到vue上，這樣我們就可以在單檔案例項中通過$rules來呼叫需要的驗證了。

*.vue 呼叫

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

<el-form :model="loginForm.formData" :rules="$rules.common" ref="oform" label-width="50px">
	<el-form-item label="賬號:" prop="mobilePhone" >
       <el-input type="text" placeholder="請輸入手機號" v-model="oform.mobilePhone" auto-complete="off"></el-input>
    </el-form-item>              
    <el-button ref="submitBtn" type="primary" @click="submitForm('oform')">測試</el-button>
</el-form>
 

也可以單獨指定具體某一驗證：:rules="$rules.Login.userName"

<el-form-item label="賬號:" prop="userName"  :rules="$rules.Login.userName" >
     <el-input type="text" placeholder="請輸入您的身份證號" v-model="loginForm.userName" auto-complete="off"></el-input>
</el-form-item>

elementui表單驗證的幾種方法

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