element 表单效验正则
Element UI 是一个基于 Vue.js 的框架,它提供了许多 UI 组件,包括表单组件。在 Element UI 中,你可以使用表单验证规则来对用户输入的数据进行验证。验证规则可以包括正则表达式,用于匹配或过滤用户输入的数据。
以下是一些常见的正则表达式示例,你可以根据需要修改它们以适应你的表单验证:
1.邮箱验证:
javascript复制代码
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
]
Element UI 已经内置了邮箱验证,你不需要提供正则表达式。但是如果你需要自定义,你可以这样做:
javascript复制代码
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ pattern: /^([a-zA-Z0-9._%-])+@([a-zA-Z0-9.-])+\.([a-zA-Z]{2,4})$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
]
2.手机号码验证:
javascript复制代码
js正则表达式验证数字和字母
rule: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
]
3.密码验证 (例如:6-20位数字、字母或符号):
javascript复制代码
rule: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^[\w\W]{6,20}$/, message: '密码长度为6-20位', trigger: 'blur' }
]
4.身份证号码验证 (简化的,不考虑最后一位的校验码):
javascript复制代码
rule: [
{ required: true, message: '请输入身份证号码', trigger: 'blur' },
{ pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[01])\d{3}(\d|X|x)$/, message: '请输入正确的身份证号码', trigger: 'blur' }
]
注意:这只是一个基本的身份证号码验证,并不完全准确,因为身份证的最后一位可以是数字或X/x,并且它是基于前面数字的校验码。
在 Element UI 的表单验证中,你可以将这些正则表达式添加到相应的表单项规则中,以实现自定义验证。