正则表达式常被用来检测前端输入的字段是否符合要求,常见的场景是注册时输入账号、密码、邮箱等input框的测试。
常见字符及含义:
1.以 ^ 开始 $ 结束
2. + 代表前面的字符 必须 至少 出现一次(1次或多次)
例:ab+c 可以匹配abc abbc abbbbbbc
如果想指定b出现的次数可以使用 { } :
ab{6}c 则b出现六次
ab{2,6}c 则b出现二到六次
ab{2,}c 则b出现二次以上
3. * 号代表前面的字符可以不出现,也可以出现一次或者多次(0次、或1次、或多次)
例:ab*c 可以匹配ac abc abbc abbbbbbc
4. ? 问号代表前面的字符最多只可以出现一次(0次或1次)
例:used? 可以匹配use或者used
5. | 或运算
例:要匹配 a dog 或者 a cat ,正则表达式可以写 a(cat | dog)
6. [ ] 匹配字符只能取自于方括号里的 可以指定范围
例:[a-zA-z0-9]+ 就是所有英文字符和数字
[^a-zA-z0-9]+ 表示匹配除英文字符和数字 (包含换行符)
7. \d 匹配数组字符 等价于[0-9] \D 匹配非数组字符 等价于[^0-9]
8. \f 匹配换页字符 \n 匹配换行字符 \r 匹配回车符字符 \s 匹配任何空白,包括空格,制表,换页 等价于[\f\n\r\t\v] \S匹配非空格字符 等价于[^\f\n\r\t\v]
9. \w 匹配字母、数字、下划线。等价于 [A-Za-z0-9_]
10.
修饰符:
11.如果想要正则验证输入空是也验证通过 则将整个表达式看为一个整体括起来后面写一个?
输入为空时也通过。
例:
12.常用的手机号身份证等正则一般可以搜到 具体匹配数字范围的比较少见
例如5-40这样的 ,可以先写出1-40的正则,然后在ipnut失焦事件中判断value值>4即可
这个事件中是将输入的不符合验证的 在失焦时重置为默认值了
一些用过的 比较少用的验证 :
1[0-9][0-9]
可以匹配100至199
2[0-4][0-9]
匹配200至249 25[0-5]
匹配250至255
let value = e.replace(/[^\-\d.]/g, '') // 只能输入.和-和数字
value = value.replace(/^\./g, '') //第一个字符不能是.
value = value.replace(/\.{2,}/g, '.') // 不能连续输入.
value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
value = value.replace(/(-)\./g, '$1') // -后面不能输入.
value = value.replace(/\-{2,}/g, '-') // -只能保留一个
value = value.replace(/(\d+|\.)-/g, '$1') // 数字和.后面不能接-,不能出现类似11-, 12.-
value = value.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似
value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似
value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
1-60 const orderRe = /^(([1-5][0-9]?)?|[1-9]|60)$/;
0-20 const scatterRe = /^(([1][0-9]?)|[1-9]|20|0)?$/;
1-10 const lineRe = /^([1-9]|10)?$/;
1-15 const scatterRe = /^(([1][0-5]?)|[1-9]|15|1)?$/;1-40 const axislabelsizeRe = /^(([1-3][0-9]?)?|[1-9]|40)$/;
0-1 包含0 1且可以为空 const barplotWidthRe = /^((0(\.[0-9]?)?)|1)?$/;
1-200 const abundTopRe = /^([1-9]|[1-9]\d|1\d{2}|200)?$/;
0-100 const iRe = /^(0|([1-9][0-9]?)|100)$/;
0-1000 const eRe =/^(0|(0\.[0-9]{0,6})|[1-9][0-9]{0,2}\.[0-9]{0,6}|[1-9][0-9]{0,2}|1000)$/;
0+ 保留一位小数 const highCexRe = /^(0|[1-9]*)+(\.\d{0,1})?$/;
(\.\d{m,n}) 最少m位 最多n位
小数 const linksizeRe = /^([1-9]+[0-9]*)?$|^([1-9]+[0-9]*\.?[0-9]*)?$|^[0]\.?$|^([0]\.\d*)?$/;
正负整数包含0 const diagangleRe = /^(-?\d{0,2})$/;
手机号正则:var re=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
邮箱:var res = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
只能输入数字、字母、_(下划线)、$但不能以数字开头且长度不能超过8位
var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,8}$/;
不能以数字开头,不能包含特殊字符,可以包含短下滑杠(_) 不能超过8个字符
var re= /^(?![0-9]+)([a-z0-9_]{0,8})?$/i;
(遇到了个小坑:如果中间那部分这样写[A-z0-9_]在匹配^这个字符时判断也为true,但是应该不可以匹配的 应为false,只有var re= /^(?![0-9]+)([a-z0-9_]{0,8})?$/i;这样写结果才能为false)
判断是数字包括小数 var re = /^(\d+(\.|\.\d*)?)$/;
判断是否有多个空格 var re = /\s+/;
(0,150]的整数 var aRe = /^([1-9]|[1-9]\d|1[0-4]\d|150)?$/;
[0-1]且保留两位小数 var bRe = /^((0(\.[0-9]{0,2})?)|1)?$/;
[0-100]且保留两位小数 var bRe = /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/;
这是最近比较常用的 还没用到的慢慢积累~
13.括号
- 大括号:量词符。里面表示重复次数。
- 中括号:字符集合。匹配方括号中的任意字符。
- 小括号:表示优先级。
14. 正则表达式中的替换
replace()
方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr,replacement)
- 第一个参数:被替换的字符串 或者 正则表达式
- 第二个参数:替换为的字符串
- 返回值:一个替换完毕的新字符串
如果正则表达式为参数
当 replace
中第一个参数为正则表达式的时候,还有一个 switch
参数可选。
/表达式/[switch]
switch
(也称为修饰符)按照什么样的模式来匹配. 有三种值:
g
:全局匹配i
:忽略大小写gi
:全局匹配 + 忽略大小写
15.exec()
exec()
方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
16.match()
match() 方法检索返回一个字符串匹配正则表达式的结果。
17.search()
search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。如果匹配成功,则 search() 返回正则表达式在字符串中首次匹配项的索引;否则,返回 -1。