1.1 前言
目前收集整理了21個常用的javaScript正則表達式,其中包括用戶名、密碼強度、整數、數字、電子郵件地址(Email)、手機號碼、身份證號、URL地址、 IP地址、 十六進制顏色、 日期、 微信號、車牌號、中文正則等。表單驗證處理必備,趕緊收藏吧!
還會陸續加入新的正則進來,大家多提寶貴意見!
2.1 用戶名正則
2.1.1 基本用戶名正則
在做用戶注冊時,都會用到用戶名正則校驗。
定義基本用戶名命名規則如下:
- 最短4位,最長16位 {4,16}
- 可以包含小寫大母 [a-z] 和大寫字母 [A-Z]
- 可以包含數字 [0-9]
- 可以包含下劃線 [ _ ] 和減號 [ - ]
- 首字母只能是大小寫字母
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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 中文用戶名正則
如果規則中加入允許中文用戶名,則變更正則表達式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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 密碼強度正則
1
2
3
4
|
//密碼強度正則,最少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 整數正則
1
2
3
4
5
6
7
8
9
10
11
12
|
//正整數正則 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 浮點數正則
1
2
3
4
5
6
7
8
9
10
11
12
|
//正浮點數正則 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 整數浮點數正則
可以是整數也可以是浮點數
1
2
3
4
5
6
7
8
9
10
11
12
|
//正數正則 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 出生日期正則
1
2
3
4
5
6
7
8
9
|
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 通用日期正則
1
2
3
4
5
6
7
8
|
//日期正則,復雜判定 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正則
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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正則
根據前一正則中的問題,追加兩條規則如下:
用戶名可以包括中文 [\u4e00-\u9fa5]
域名結尾最長可為8位 {2,8}
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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分鐘郵箱或一次性郵箱)的出現,則使得郵箱驗證及帳戶激活這種機制失去了意義。而臨時郵箱的地址是不可枚舉的,我們只能才采取白名單的方式,只允許有限的郵箱域名通過驗證。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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' )); |
此方法雖然能保證驗證安全性,但是如果白名單太長會造成模式字符串太長。這時可以將郵箱域名白名單寫成數組,利用正則表達式做初步驗證,用白名單做域名的二次驗證。
常用域名白名單數組:
1
|
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 手機號碼正則
1
2
3
4
|
//手機號正則 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 身份證號正則
1
2
3
4
|
//身份證號(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正則
1
2
3
4
|
//URL正則 var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; //輸出 true console.log(urlP.test(<a href= "http://30ke.cn" >http://30ke.cn</a>)); |
2.9 IP地址
2.9.1 IPv4地址正則
1
2
3
4
|
//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地址正則
1
2
3
4
|
//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 十六進制顏色正則
1
2
3
4
|
//RGB Hex顏色正則 var cPattern = /^ #?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/; //輸出 true console.log(cPattern.test( "#b8b8b8" )); |
2.11 QQ號碼正則
1
2
3
4
|
//QQ號正則,5至11位 var qqPattern = /^[1-9][0-9]{4,10}$/; //輸出 true console.log(qqPattern.test( "65974040" )); |
2.12 微信號正則
1
2
3
4
|
//微信號正則,6至20位,以字母開頭,字母,數字,減號,下劃線 var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/; //輸出 true console.log(wxPattern.test( "RuilongMao" )); |
2.13 車牌號正則
1
2
3
4
|
//車牌號正則 var cPattern = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/; //輸出 true console.log(cPattern.test( "京K39006" )); |
2.14 包含中文正則
1
2
3
4
|
//包含中文正則 var cnPattern = /[\u4E00-\u9FA5]/; //輸出 true console.log(cnPattern.test( "30課" )); |
總結
以上所述是小編給大家介紹的常用JavaScript正則表達式匯編與示例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
原文鏈接:http://30ke.cn/doc/js-regexp#password