[专题] 常用 JavaScript 正则表达式(regexp)汇编与示例

2019-04-25 11:18:20 +08:00
 iFat3

1 概述

1.1 前言

目前收集整理了 21 个常用的 javaScript 正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址( Email )、手机号码、身份证号、URL 地址、IP 地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单验证处理必备,赶紧收藏吧!

还会陆续加入新的正则进来,大家多提宝贵意见!

2 正则列表

2.1 用户名正则

2.1.1 基本用户名正则

在做用户注册时,都会用到用户名正则校验。

定义基本用户名命名规则如下:

var pattern = /^[a-zA-Z][a-zA-Z0-9_-]{3,15}$/;
//输出 true
console.log("ifat3: "+pattern.test('ifat3'));
//输出 true
console.log("Ifat3: "+pattern.test('Ifat3'));
//输出 true
console.log("ke30: "+pattern.test('ke30'));
//输出 false
console.log("30ke: "+pattern.test('30ke'));
//输出 false
console.log("ke3: "+pattern.test('ke3'));
输出 false
console.log("ke30@ : "+pattern.test('ke30@'));
//输出 false
console.log("ke30ke30ke30ke30ke30: "+pattern.test('ke30ke30ke30ke30ke30'));

查看示例程序

2.1.2 中文用户名正则

如果规则中加入允许中文用户名,则变更正则表达式如下:

var pattern = /^[a-zA-Z\u4E00-\u9FA5][a-zA-Z0-9\u4E00-\u9FA5_-]{3,15}$/;
//输出 true
console.log("ifat3: "+pattern.test('ifat3'));
//输出 true
console.log("Ifat3: "+pattern.test('Ifat3'));
//输出 true
console.log("三十课毛瑞 : "+pattern.test('三十课毛瑞'));
//输出 false
console.log("30ke: "+pattern.test('30ke'));
//输出 false
console.log("ke3: "+pattern.test('ke3'));
//输出 false
console.log("ke30@ : "+pattern.test('ke30@'));
  //输出 false
console.log("ke30ke30ke30ke30ke30: "+pattern.test('ke30ke30ke30ke30ke30'));

其中[\u4E00-\u9FA5]是汉字的正则匹配,包括基本汉字 2 万多个,其中\u4E00表示汉字“一”,具体请参见《汉字 unicode 编码范围》。

查看示例程序

2.2 密码强度正则

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

上述正则表达式只能对用户密码强度进行基本的通过性判定,关于密码强度验证更多的内容可参见:基于规则评分的密码强度检测算法分析及实现

查看示例程序

2.3 数字相关正则

2.3.1 整数正则

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

查看示例程序

2.3.2 浮点数正则

//正浮点数正则
var posPattern = /^\d*\.\d+$/;
//负浮点数正则
var negPattern = /^-\d*\.\d+$/;
//两位小数正则
var twoPattern = /^-?\d*\.\d{2}$/;  
//输出 true
console.log("30.2:"+posPattern.test("30.2"));
//输出 true  
console.log("-30.2:"+negPattern.test("-30.2"));
//输出 true  
console.log("-30.22:"+twoPattern.test("-30.22"));

查看示例程序

2.3.3 整数浮点数正则

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

//正数正则
var posPattern = /^\d*\.?\d+$/;
//负数正则
var negPattern = /^-\d*\.?\d+$/;
//数字正则
var numPattern = /^-?\d*\.?\d+$/;
//输出 true
console.log("30.2:"+posPattern.test("30.2"));
//输出 true  
console.log("-30.2:"+negPattern.test("-30.2"));
//输出 true  
console.log("-30.2:"+numPattern.test("-30.2"));

查看示例程序

2.4 日期正则

2.4.1 出生日期正则

var pattern = /^((19[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;
//输出 true
console.log(pattern.test("1923-3-18"));
//输出 true
console.log(pattern.test("1923-4-31"));
//输出 true
console.log(pattern.test("1923-2-29"));
//输出 true
console.log(pattern.test("2016-2-29"));

上述正则验证还不完善,主要是 2,4,6,9,11 月份的天数问题。

查看示例程序

2.4.2 通用日期正则

//日期正则,复杂判定
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"));

查看示例程序

2.5 Email 正则

2.5.1 基本 Email 正则

var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(pattern.test('cn30ke@163.com'));
//输出 true
console.log(pattern.test('ifat3@sina.com.cn'));
//输出 true
console.log(pattern.test('ifat3.it@163.com'));
//输出 true
console.log(pattern.test('ifat3_-.@30ke.cn'));
//输出 false
console.log(pattern.test('ifat3@30ke.online'));
//输出 false
console.log(pattern.test('毛瑞 @30ke.cn'));

基本 Email 正则是最常用的验证方式,也适合大多数的应用场景。从以上测试可以看出,该表达式不支持.online 及.store 结尾的域名。如需兼容这类域名(大于 4 位),调整正则结尾{ 2,4 }的限制部分即可(例:{2,8})。另一个问题是 Email 用户名不能包括中文。

查看示例程序

2.5.2 中文名 Email 正则

根据前一正则中的问题,追加两条规则如下:

var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
//输出 true
console.log(pattern.test('cn30ke@163.com'));
//输出 true
console.log(pattern.test('ifat3@sina.com.cn'));
//输出 true
console.log(pattern.test('ifat3.it@163.com'));
//输出 true
console.log(pattern.test('ifat3_-.@30ke.cn'));
//输出 true
console.log(pattern.test('ifat3@30ke.online'));
//输出 true
console.log(pattern.test('毛瑞 @30ke.cn'));

查看示例程序

2.5.3 特定域名 Email 正则

在手机验证码出现之前,差不多邮箱验证是保证用户唯一性的唯一条件。而临时邮箱(也称 10 分钟邮箱或一次性邮箱)的出现,则使得邮箱验证及帐户激活这种机制失去了意义。而临时邮箱的地址是不可枚举的,我们只能才采取白名单的方式,只允许有限的邮箱域名通过验证。

var pattern = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com|30ke.cn)$/;
//输出 true
console.log(pattern.test('cn30ke@163.com'));
//输出 false
console.log(pattern.test('ifat3@sina.com.cn'));
//输出 true
console.log(pattern.test('ifat3.it@163.com'));
//输出 true
console.log(pattern.test('ifat3_-.@30ke.cn'));
//输出 false
console.log(pattern.test('ifat3@30ke.online'));
//输出 false
console.log(pattern.test('毛瑞 @30ke.cn'));

此方法虽然能保证验证安全性,但是如果白名单太长会造成模式字符串太长。这时可以将邮箱域名白名单写成数组,利用正则表达式做初步验证,用白名单做域名的二次验证。

常用域名白名单数组:

var domains= ["qq.com","163.com","vip.163.com","263.net","yeah.net","sohu.com","sina.cn","sina.com","eyou.com","gmail.com","hotmail.com"];

上述白名单只列举了常用的 11 种邮箱域名,大家可以根据需要适当补充或删减。

查看示例程序

2.6 手机号码正则

//手机号正则
var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
//输出 true
console.log(mPattern.test("18600000000"));

查看示例程序

2.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"));

上述正则只能对身份证号进行基本的通过性判定,关于公民身份号码判定的更多内容可参见文档:公民身份号码正确性判定及程序实现

查看示例程序

2.8 URL 正则

//URL 正则
var urlP= /^(( https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//输出 true
console.log(urlP.test("http://30ke.cn"));

查看示例程序

2.9 IP 地址

2.9.1 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"));

查看示例程序

2.9.2 IPv6 地址正则

//IPV6 正则
var pattern = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;
//输出 true
console.log(pattern.test("fe80:0000:0000:0000:0204:61ff:fe9d:f156"));

查看示例程序

2.10 十六进制颜色正则

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

查看示例程序

2.11 QQ 号码正则

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

查看示例程序

2.12 微信号正则

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

查看示例程序

2.13 车牌号正则

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

查看示例程序

2.14 包含中文正则

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

查看示例程序

3 结尾

3.1 结语

本人水平有限,如有错误,请不吝指正!谢谢。

2905 次点击
所在节点    JavaScript
2 条回复
xiangyuecn
2019-04-25 11:55:01 +08:00
https://www.v2ex.com/t/527552 欢迎围观。基本上看到手机号码的正则表达式都想吐槽。

另:url 正则没卵用,带 端口、localhost、ip、hash、querystring 的都说不是 url🤨 坑死人反正不用偿命嘛😏
azh7138m
2019-04-25 12:51:19 +08:00
楼上说的很对啊,你要判断是不是 url 的话,根据 rfc 来更加合理,给一个 rfc1738 的例子
https://github.com/muzea/parser/blob/master/test/rfc1738.spec.ts#L19

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/558516

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX