前言:
正则这块着实使人头痛,之前用的时候总是很抓狂,甚至都不明白每个验证拆分开表达的是什么,痛定思痛,去学习了下,现在虽然说不上精通,但是简单运用还是不成问题的,相信你记住这几个知识点就可以使用了,很好记的,实在不行可以按照例子去写一遍也能记住不少。学会之后就会发现其中的奥妙,你细体会哟~
正则基础点:
标识符或修饰符(flags)
修饰符 | 描述 |
---|---|
g | 全局匹配(global) |
i | 忽略大小写(case-insensitive) |
m | 多行匹配(multiline) |
字符合集(Character Sets)
修饰符 | 描述 |
[xyz] | 匹配 “x"或"y”"z" [^xyz] 补集,匹配除“x”“y”“z”之外的其他字符 |
[a-z] | 匹配从 “a” 到 “z” 的任意字符 [^a-n] 补集,匹配除 “a” 到 “n” 之外的其他字符 [A-Z] 匹配从 “A” 到 “Z” 的任意字符 |
[0-9] | 匹配从 “0” 到 “9” 的任意数字 x|y 匹配x或y。例如,“z|food ”能匹配“z ”或“food ”。“(z|f)ood ”则匹配“zood ”或“food ”。 |
比如匹配所有的字母和数字可以写成:/[a-zA-Z0-9]/ 或者 /[a-z0-9]/i。
修饰符 | 描述 |
{n} | 匹配 n 次 |
{n,m} | 匹配 n-m 次 |
{n,} | 匹配 >=n 次,最少为 n 次 |
? | 匹配 0 || 1 次 |
* | 匹配 >=0 次,等价于 {0,},最少为 0 次 |
+ | 匹配 >=1 次,等价于 {1,},最少为 1 次 |
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串 |
(pattern) | 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中则使用$0…$9属性。要匹配圆括号字符,请使用“”或“” |
(?:pattern) | 匹配pattern但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式 |
(?=pattern) | 正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”,但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始 |
(?!pattern) | 正向否定预查,在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中的“Windows” |
(?<=pattern) | 反向肯定预查,与正向肯定预查类似,只是方向相反。例如,“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”,但不能匹配“3.1Windows”中的“Windows” |
(? | 反向否定预查,与正向否定预查类似,只是方向相反。例如“(? |
元字符(Metacharacters)
修饰符 | 描述 |
d | 匹配任意数字,等价于 [0-9] |
D | 匹配任意非数字字符;d 的补集 |
w | 匹配任意基本拉丁字母表中的字母和数字,以及下划线;等价于 [A-Za-z0-9_] |
W | 匹配任意非基本拉丁字母表中的字母和数字,以及下划线;w 的补集 |
s | 匹配一个空白符,包括空格、制表符、换页符、换行符和其他Unicode空格 |
S | 匹配一个非空白符;s的补集 |
b | 匹配一个零宽单词边界,如一个字母与一个空格之间;例如,/bno/ 匹配 “at noon” 中的 “no”,/lyb/ 匹配 “possibly yesterday.” 中的 “ly” |
B | 匹配一个零宽非单词边界,如两个字母之间或两个空格之间;例如,/Bon/ 匹配 “at noon” 中的 “on”,/yeB/ 匹配 “possibly yesterday.” 中的 “ye” |
t | 匹配一个水平制表符(tab) |
n | 匹配一个换行符(newline) |
r | 匹配一个回车符(carriage return) |
特殊字符(Special Characters)
^ 和 $ 在表单验证时常需要使用,因为需要验证从开始到结尾的一个完整输入,而不是匹配输入中的某一段
正则表达式:
语法:/正则表达式主体/修饰符(可选)
方法:
test()
test()方法哟关于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false。
// 不区分大小写
let a = /a/i
let n = a.test(/A person's energy is infinite/)
console.log(n) // true
// 区分大小写
let a = /a/
let n = a.test(/A person's energy is infinite/)
console.log(n) // false
let a = /A/
let n = a.test(/A person's energy is infinite/)
console.log(n) // true
exec()
exec()方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果,如果没有匹配项,返回null。
let a = /a/i
let n = a.exec(/A person's energy is infinite/)
console.log(n) // [A]
let a = /A/
let n = a.exec(/A person's energy is infinite/)
console.log(n) // [A]
let a = /ape/i
let n = a.exec(/A person's energy is infinite/)
console.log(n) // null
let a = /pe/i
let n = a.exec(/A person's energy is infinite/)
console.log(n) // [pe]
search()
search()方法用于检索字符串中指定的字符串,或检索与正则表达式相匹配的字符串,并返回起始位置;返回 -1 则不存在。
let a = 'Janine.fan'
// 区分大小写
let n = a.search(/J/)
console.log(n) // 0
let n = a.search(/j/)
console.log(n) // -1
// 不区分大小写
let n = a.search(/j/i)
console.log(n) // 0
replace()
replace()方法用于在字符串中用一些替换另一些字符,或替换一个与正则表达式匹配的子串。
let a = 'Janine.fan'
let n = a.replace(/fan/, '正则表达式')
console.log(n) // Janine.正则表达式
正则案例:
手机号验证:
手机号共十一位,我这里写的是13或15开头的,可以根据需要自行设计
let a = /^(13[0-9]|15[0-9]\d{8})$/
if (!a.test(value)) {
callback(new Error('手机号格式错误'))
}
手机号:132-1232-4123
var reg2 = /(13\d|15\d)-\d{4}-\d{4}/;
固定电话:093-1234567;0123-12345678
var reg2 = /^0\d{2,3}-\d{7,8}$/;
多个手机号码用逗号分隔,且最后一个不能有逗号
if (value == '' || value == null) {
callback(new Error('测试号码不能为空'))
} else {
if (!/^[0-9,]*$/.test(value)) {
callback(new Error('只能输入数字和英文逗号'))
} else {
const hasEmpty = value.split(',').some(item => {
return item == ''
});
const hasLength = value.split(',').some(item => {
return item.length !== 11
});
const hasNumber = value.split(',').length;
if (hasNumber > 10) {
callback(new Error('最多只能输入10个手机号'))
} else if (hasEmpty) {
callback(new Error('不能输入多余的逗号'))
} else if (hasLength) {
callback(new Error('请输入11位的手机号'))
} else {
callback()
}
}
}
邮箱验证:
没有下划线
let reg = /^\w+@[0-9a-z]{2,3}\.[a-z]{2,4}$/
if (value == '' || value === null || value === undefined) {
callback(new Error('不能为空'))
} else if (!reg.test(value)) {
callback(new Error('格式不对'))
} else {
callback()
}
添加下划线
let reg = /^\w+\_+@[0-9a-z]{2,3}\.[a-z]{2,4}$/
if (value == '' || value === null || value === undefined) {
callback(new Error('不能为空'))
} else if (!reg.test(value)) {
callback(new Error('格式不对'))
} else {
callback()
}
密码验证
纯数字、字母、特殊字符
//这里我写的是密码在6~12位
let reg = /^([0-9]+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/;
if (value == '' || value === null || value === undefined) {
callback(new Error('不能为空'))
} else if (!reg.test(value)) {
callback(new Error('格式不对'))
} else {
callback()
}
两两组合
let reg2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/
整合(3种)
let reg2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/
url地址验证
//可以是HTTP、https、ftp、file开头
let reg = /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/
if (value == '' || value === null || value === undefined) {
callback(new Error('不能为空'))
} else if (!reg.test(value)) {
callback(new Error('请输入正确的链接'))
} else {
callback()
}
身份证验证:18位
var reg2 = /(^\d{18}$)|(^\d{17}(\d{1}|X|x)$)/;
校验整数:
let reg2 = /^(-|\+)?\d+$/;
如果➕只代表加号的时候,切勿忘记加转义符
或
var Integer= (rule, value, callback) => {
if (value !== '') {
if (!Number.isInteger(Number(value)) || Number(value) < 1) {
callback(new Error('请输入大于0的整数'))
} else {
callback()
}
} else {
callback()
}
};
保留两位小数
let reg2 = /^(-|\+)?\d+(\.\d{2})$/;
日期格式
// 可以直接输出 2021-9-18 格式
new Date().toLocaleDateString().replace(/\//g,'-')
这里说明一下,上述方法获取得时间格式是不会自动补零的,如果需要补零可以使用下面的方法
let data = new Date()
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h=h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second=date.getSeconds();
second=second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
或
Vue.filter('dataFormat', function(originVal) {
const date = new Date(originVal)
const y = date.getFullYear()
const m = (date.getMonth() + 1 + '').padStart(2, '0')
const d = (date.getDate() + '').padStart(2, '0')
const hh = (date.getHours() + '').padStart(2, '0')
const mm = (date.getMinutes() + '').padStart(2, '0')
const ss = (date.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
//直接使用
<el-table-column label="创建时间" prop="newtime">
<template slot-scope="scope">
{{ scope.row.newtime | dataFormat }}</template
>
</el-table-column>
首尾空格(去除)
value.replace(/(^\s*)|(\s*$)/g, '')
禁止两边输入空格
value.trim()
或者直接在绑定的时候做限制
v-model.trim='value'
禁止中间输入空格
// 在方法里面添加该方法
keydown(e){
if(e.keyCode == 32){
e.returnValue = false
}
}
// 在表单里加上
@keydown.native= 'keydown($event)'
//完整代码
// js
methods: {
keydown(e){
if(e.keyCode == 32){
e.returnValue = false
}
}
}
<el-form-item
@keydown.native= 'keydown($event)'
label='表单名称'
>
<el-input v-model.trim='value' placeholder='请输入表单名称'/>
</el-form-item>
只能是英文字母
var reg2 = /^[a-zA-Z]+$/
总结
简单学习后,每次都是写一点总算是写完了。希望都能正确运用正则表达式,它将会带给你意想不到的惊喜,如有问题,欢迎留言~