elementui正则
Element UI 表单验证中的正则表达式使用
Element UI 的表单验证功能支持通过 pattern 或 validator 结合正则表达式进行自定义校验。以下是几种常见的使用方法：
使用 pattern 进行简单正则校验
在 rules 中直接使用 pattern 进行正则匹配：
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
}使用 validator 进行复杂校验
如果需要更复杂的逻辑，可以通过 validator 自定义校验函数：
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: (rule, value, callback) => {
if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
callback(new Error('密码需至少8位，包含字母和数字'));
} else {
callback();
}
}, trigger: 'blur' }
]
}常见正则表达式示例
-
手机号（中国大陆）
/^1[3-9]\d{9}$/ -
邮箱
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ -
身份证号（18位）
/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/ -
强密码（至少8位，含字母和数字）
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
动态调整正则表达式
可以通过 setOptions 动态修改校验规则：
this.$refs.form.setOptions({
email: [
{ pattern: /^[a-z]+@example\.com$/, message: '仅允许 example.com 邮箱' }
]
});通过以上方法，可以灵活地在 Element UI 表单中使用正则表达式进行数据校验。
