elementui正则
ElementUI 表单验证中使用正则表达式
ElementUI 的表单验证机制支持通过正则表达式进行自定义校验。以下为常见实现方式：
定义正则规则
在 rules 对象中通过 pattern 属性直接指定正则表达式：
rules: {
phone: [
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
]
}结合 validator 自定义校验
若需更复杂的逻辑，可在 validator 函数中使用正则：
rules: {
password: [
{
validator: (rule, value, callback) => {
const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\w\W]{6,}$/;
if (!reg.test(value)) {
callback(new Error('需包含大小写字母和数字，长度≥6'));
} else {
callback();
}
},
trigger: 'blur'
}
]
}常用正则示例
-
邮箱校验
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ -
身份证号
/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/ -
中文姓名
/^[\u4e00-\u9fa5]{2,4}$/
动态正则规则
通过变量传递正则表达式：
data() {
const dynamicReg = new RegExp('^\\d{' + this.codeLength + '}$');
return {
rules: {
code: [{ pattern: dynamicReg, message: '长度不符' }]
}
};
}注意事项
- 正则表达式需用
/.../包裹或通过new RegExp()构造。 - 表单验证失败时，
message属性会显示错误提示。 - 测试正则时建议使用工具如 Regex101 验证准确性。
