本文转载自：vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）_vue中动态添加校验手机号长度_新林。的博客-CSDN博客

自定义校验（正则校验手机号码、数字、url、中文）

提供几个用正则表达式做的自定义校验规则demo书写的另一种方式 如下：

data() {return {//在rules属性填写相关字段的校验规则rules: {username: [{ required: true, message: "必填" },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],//自定义校验name:[{ required: true, message: '姓名不能为空', trigger: 'blur' },//校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/{pattern: /^[\u4e00-\u9fa5]{0,}$/,message: "只能是中文",trigger: "blur",},],phone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },//校验手机号的正则：/^1[3456789]\d{9}$/{pattern:/^1[3456789]\d{9}$/,message: "请输入正确的手机号",trigger: "blur",},],age:[//校验数字:/^[0-9]*$/{pattern: /^[0-9]*$/,message: "只能包含数字",trigger: "blur",},],url:[//校验URL ：/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/{pattern: /^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/,message: "请输入正确的URL",trigger: "blur",},],}}
}