JS使用正則表示式實現常用的表單驗證功能分析
本文例項講述了JS使用正則表示式實現常用的表單驗證功能。分享給大家供大家參考，具體如下：
表單驗證是一個網站或應用的重點，一條合適的錯誤提示不僅可以減少無效資訊錄入，更會給使用者留下良好的使用體驗。但表單設計千差萬別，使用者輸入更不可控。一方面，我們要減少出錯提示（這會引起使用者反感），而另一方面，我們則希望得到足夠多的有效資訊。魚和熊掌如何兼得？
寫一個簡單的表單驗證:https://www.jb51.net/article/185782.htm
從Google中，我們可以找到一些實用的方法：
- 設計合適的提示資訊；
- 正則表示式篩選錯誤輸入。
如何將錯誤資訊合適的展示給使用者，我想是見仁見智，需要根據具體專案具體分析（參考淘寶、京東等電商設計）。這裡主要討論第二種方案：通過正則表示式最大限度的過濾使用者輸入
這裡先列出我自己常用的正則表示式，然後在深入全面的學習它！
常用正則表示式
文字輸入（拒絕表情）：/^[\u4e00-\u9fa5\w]+.*$/gi
密碼： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
中文地址（以中文開始，包含英文字元、數字、括號）：/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/
身份證：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
電子郵箱：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
傳真：/^(\d{3,4}-)?\d{7,8}$/
網址：/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
座機：/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
手機：/^1[34578]\d{9}$/
郵編：/^[1-9][0-9]{5}$/
通用驗證資訊提示函式
/**
* @param {Object} $input 需要驗證的輸入項
* @param {String} reg 正則表示式
* @param {String} tips 提示資訊
*/
function isInfoValid($input,reg,tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能為空！<span>')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after('<span class="valid-error">'+ tips +'</span>')
}else {
$input.next().remove();
}
}
// 可以這樣使用
isInfoValid($zipCode,/^[1-9][0-9]{5}$/,'*請輸入正確的郵編！');
深入學習正則表示式
1. RegExp物件
有兩種方法例項化RegExp物件
-
字面量
var reg = /\bis\b/g; // 全域性匹配單詞is -
建構函式
var reg = new RegEXP('\\bis\\b',g)
2. 修飾符
-
g：global全文搜尋，不新增，搜尋到第一個匹配停止 預設false，只讀
-
i：ignore case 忽略大小寫， 預設false，只讀
-
m：multiple lines 多行搜尋 預設false，只讀
-
lastIndex： 是當前表示式匹配內容的最後一個字元的下一個位置
-
source：正則表示式的文字字串
> var reg1 = /\w/gim; > reg1.source < "\w"
3. 元字元
正則表示式由兩種基本字元型別組成：
-
原義文字字元
a,b,c,d..
-
元字元
*+？$ ^ . | \ （ ）{ } [ ]
\t 水平製表符 \v 垂直製表符 \n 換行符 \r 回車符 \0 空字元 \f 換頁符
4. 字元類
- 我們可以使用元字元 [] 來構建一個簡單的類
所謂類是指符合某些特徵的物件，一個泛指，不是特指某個字元
表示式
[abc]把字元a或b或c歸為一類，表示式可以匹配這類字元
- 字元取反（^）
使用元字元 ^ 建立反向類
表示式
[^abc]表示 不是字元a或b或c的內容
5. 範圍類
-
使用[a-z]來連線兩個字元表示從a到z的任意字元，閉區間，包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g,'Q'); < "Q1Q2Q3Q4" -
範圍類可以連寫
[a-zA-Z]> '2015-11-5'.replace(/[0-9-]/g,'A') < "AAAAAAAAA"
6.預定義類及邊界
6.1 預定義類
| 字元 | 等價類 | 含義 |
|---|---|---|
| . | [^\r\n] | 除了回車符和換行符以外的所有字元 |
| \d | [0-9] | 數字字元 |
| \D | [^0-9] | 非數字字元 |
| \s | [\t\n\x0B\f\r] | 空白字元 |
| \w | [a-zA-Z_0-9] | 單詞字元（字母數字下劃線） |
| \W | [^a-zA-Z0-9_] | 非單詞字元 |
6.2 邊界
| 字元 | 含義 |
|---|---|
| ^ | 以XXXXX開始 |
| $ | 以xxxx結束 |
| \b | 單詞邊界 |
| \B | 非單詞邊界 |
7. 量詞
| 字元 | 含義 |
|---|---|
| ？ | 出現零次或一次（最多出現1次） |
| + | 出現一次或多次 |
| * | 出現零次或多次（任意 |
| {n} | 出現n次 |
| {n,m} | 出現n到m次 |
| {n,} | 至少出現n次 |
8.貪婪模式與非貪婪模式
8.1 貪婪模式
在正則表示式中，預設儘可能多的匹配
> '1234678'.replace(/\d{3,6}/g,'X')
< "X78"
8.2 非貪婪模式
讓正則表達誰儘可能少的匹配，也就是說一旦成功匹配就不再繼續嘗試
做法很簡單，在量詞後面加一個 ？即可
> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
9. 分組
9.1 分組
使用 （）可以達到分組的功能，使量詞作用於分組
> 'fayfayfayfsd'.replace(/(fay){3}/g,'X')
< "Xfsd"
9.2 或
使用 | 表示 或
> 'ByronCasper'.replace(/Byron|Casper/g,'X')
< "XX"
9.3 $引用，捕獲分組
- 注意： 一定要加（），用$捕獲分組
> '2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2016"
-
忽略分組
不希望捕獲某些分組，只需要在分組內加上 ？：
(?:Byron).(ok)
PS：這裡再為大家提供2款非常方便的正則表示式工具供大家參考使用：
JavaScript正則表示式線上測試工具：
http://tools.jb51.net/regex/javascript
正則表示式線上生成工具：
http://tools.jb51.net/regex/create_reg
更多關於jQuery相關內容可檢視本站專題：《jQuery正則表示式用法總結》、《jQuery字串操作技巧總結》、《jQuery操作xml技巧總結》、《jQuery擴充套件技巧總結》、《jquery選擇器用法總結》及《jQuery常用外掛及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。