前言：
正则这块着实使人头痛，之前用的时候总是很抓狂，甚至都不明白每个验证拆分开表达的是什么，痛定思痛，去学习了下，现在虽然说不上精通，但是简单运用还是不成问题的，相信你记住这几个知识点就可以使用了，很好记的，实在不行可以按照例子去写一遍也能记住不少。学会之后就会发现其中的奥妙，你细体会哟~
正则基础点：
标识符或修饰符（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) // trueexec()
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) // 0replace()
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]+$/总结
简单学习后，每次都是写一点总算是写完了。希望都能正确运用正则表达式，它将会带给你意想不到的惊喜，如有问题，欢迎留言~
2973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
