loading...

0

前端表单验证常用的15个JS正则表达式

正则 javascript读完大概需要13分钟

  • 发布时间:2017-10-08 14:29 星期日
  • 刘伟波
  • 221
  • 更新于2018-09-05 10:31 星期三

1 用户名正则

//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caibaojian"));

密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

2 密码强度正则

//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("==" pPattern.test("caibaojian#"));

密码长度6-12位,有数字,小写字母和大写字母组成,但至少包括两种字符
  /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/
或者  /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/

3 整数正则

//正整数正则
var posPattern = /^d $/;
//负整数正则
var negPattern = /^-d $/;
//整数正则
var intPattern = /^-?d $/;
//输出 true
console.log(posPattern.test("42"));
//输出 true
console.log(negPattern.test("-42"));
//输出 true
console.log(intPattern.test("-42"));

4 数字正则

可以是整数也可以是浮点数

//正数正则
var posPattern = /^d*.?d $/;
//负数正则
var negPattern = /^-d*.?d $/;
//数字正则
var numPattern = /^-?d*.?d $/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));

5 Email正则

//Email正则
var ePattern = /^([A-Za-z0-9_-.]) @([A-Za-z0-9_-.]) .([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test("99154507@qq.com"));
var reg = /[\w!#$%&'* /=?^_`{|}~-] (?:\.[\w!#$%&'* /=?^_`{|}~-] )*@(?:[\w](?:[\w-]*[\w])?\.) [\w](?:[\w-]*[\w])?/;

6 手机号码正则

//手机号正则
var mPattern = /^1[34578]d{9}$/; //http://caibaojian.com/regexp-example.html
//输出 true
console.log(mPattern.test("15507621888"));
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

7 身份证号正则

//身份证号(18位)正则
var cP = /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/;
//输出 true
console.log(cP.test("11010519880605371X"));
15位:
var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
18位:
var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

8 URL正则

//URL正则
var urlP= /^((https?|ftp|file)://)?([da-z.-] ).([a-z.]{2,6})([/w .-]*)*/?$/;

/(http|ftp|https)://[w-_] (.[w-_] ) ([w-.,@?^=%&:/~ #]*[w-@?^=%&/~ #])?/
//输出 true
console.log(urlP.test("http://caibaojian.com"));

检查URL的前缀

应用开发中很多时候需要区分请求是HTTPS还是HTTP,通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(/^[a-zA-Z] :///)) {
    s = 'http://' s;
}

提取URL链接

下面的这个表达式可以筛选出一段文本中的URL。

var reg = /^(f|ht){1}(tp|tps)://([w-] .) [w-] (/[w- ./?%&=]*)?/;

9 IPv4地址正则

//ipv4地址正则
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//输出 true
console.log(ipP.test("115.28.47.26"));
var reg = /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

10 十六进制颜色正则

//RGB Hex颜色正则
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//输出 true
console.log(cPattern.test("#b8b8b8"));

11 日期正则

//日期正则,简单判定,未做月份及日期的判定
var dP1 = /^d{4}(-)d{1,2}1d{1,2}$/;
//输出 true
console.log(dP1.test("2017-05-11"));
//输出 true
console.log(dP1.test("2017-15-11"));
//日期正则,复杂判定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//输出 true
console.log(dP2.test("2017-02-11"));
//输出 false
console.log(dP2.test("2017-15-11"));
//输出 false
console.log(dP2.test("2017-02-29"));
var reg1 = /^d{4}(-|/|.)d{1,2}1d{1,2}$/;

var reg2 = /^(^(d{4}|d{2})(-|/|.)d{1,2}3d{1,2}$)|(^d{4}年d{1,2}月d{1,2}日$)$/;


“yyyy-mm-dd” 格式的日期校验,已考虑平闰年。

var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
匹配时间  13:09
  /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[1-9]|[1-5][0-9])$/ 

12 QQ号码正则

//QQ号正则,5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("65974040"));

13 微信号正则

//微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19}) $/;
//输出 true
console.log(wxPattern.test("caibaojian_com"));

14 车牌号正则

//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
//输出 true
console.log(cPattern.test("粤B39006"));

15 包含中文正则

//包含中文正则
var cnPattern = /[u4E00-u9FA5]/;
//输出 true
console.log(cnPattern.test("蔡宝坚"));

[^x00-xff]
表示匹配非单字节的字符,例如汉字,汉字符号……
单字节字符包括英文字母,数字,英文符号……排除这些剩下的也就是汉字和其他文字了


16 匹配图片路径

1.有一个String 字段 “那份试卷农夫三陈女士将可能hukbik<img alt="" src="x:/xx.jpg"/>cbschgbsjkb补偿”,这样的字段,还有可能字段里还插了很多张图片,我要把图片路径输出来。也就是 x:/xx.jpg 

img.*?src="([C-Zc-z]:/.*?.[A-Za-z0-9] )"
/.*?(jpg|gif|png|bmp)    位图片路径


17. 校验金额

金额校验,精确到2位小数。

var reg = /^[0-9] (.[0-9]{2})?$/;


18. 判断IE的版本

IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。

var reg = /^.*MSIE [5-8](?:\.[0-9] )?(?!.*Trident\/[5-9]\.0).*$/;



19. 文件路径及扩展名校验

验证windows下文件路径和扩展名(下面的例子中为.txt文件)

var reg = /^([a-zA-Z]\:|\\)\\([^\] \)*[^\/:*?"<>|] \.txt(l)?$/;



3 匹配操作系统文件路径
   F:m-jr-webstatic.png
  /^[a-zA-Z]:\([^\:*<>|"? /"] \)*([^\:*<>|"? /] )"?$])/


4 给数字加千分位 
"123456789".replace(/(?!^)(?=(d{3}) $)/g, ',')  ===> 123,456,789


20. 提取Color Hex Codes

有时需要抽取网页中的颜色代码,可以使用下面的表达式。

var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;


1  匹配色值  #ffbbbb  #Fff  #10bbfe  #ffF
/#([0-9a-fA-F]{6})|(0-9a-fA-F){3}/g


21. 提取网页图片

假若你想提取网页中所有图片信息,可以利用下面的表达式。

var reg = /\< *[img][^\>]*[src] *= *[\"']{0,1}([^\"' >]*)/;

22 提取页面超链接

提取html中的超链接。

var reg = /(<a\s*(?!.*\brel=)[^>]*)(href="https?://)((?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^"] )"((?!.*\brel=)[^>]*)(?:[^>]*)>/;
</a\s*(?!.*\brel=)[^>

23. 查找CSS属性

通过下面的表达式,可以搜索到相匹配的CSS属性。

var reg = /^\s*[a-zA-Z\-] \s*[:]{1}\s[a-zA-Z0-9\s.#] [;]{1}/;

24. 抽取注释

如果你需要移除HMTL中的注释,可以使用如下的表达式。

var reg = /<!--(.*?)-->/;


本文将会陆续收集前端表单中的正则验证。


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!