VUE Element-ui 表单自定义验证规则

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误

HTML代码：

<el-form 
	:model="modifyForm" 
	:rules='modifyFormRules'
	label-suffix="："
	ref="modifyForm" 
	label-width="100px"
	class="demo-ruleForm" 
>
	<el-form-item label="身份证号" prop="cardId">
		<el-input class="inp" v-model="modifyForm.cardId"></el-input>
	</el-form-item>
	<el-form-item label="手机号" prop="phoneNumber">
		<el-input class="inp" v-model.number="modifyForm.phoneNumber"></el-input>
	</el-form-item>
</el-form> 

验证：

modifyFormRules:{   /*信息修改表单验证 */
 cardId:[
   {required:true, message:'请输入身证号', trigger:'blur'},
   {
	 pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
	 message: '身份证号码格式有误',
	 trigger:'blur'
   },
 ],
 phoneNumber:[
   {required:true, message:'请输入手机号', trigger:'blur'},
   {pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,message: '手机号格式不对',trigger:'blur'},
 ],
}

注：

          1、使用 pattern 验证属性 定义正则表达式， 进行验证

          2、使用 v-model.number 限制输入内容为数字