本文實例講述了JS使用正則表達式實現(xiàn)常用的表單驗證功能。分享給大家供大家參考，具體如下：

表單驗證是一個網(wǎng)站或應用的重點，一條合適的錯誤提示不僅可以減少無效信息錄入，更會給用戶留下良好的使用體驗。但表單設計千差萬別，用戶輸入更不可控。一方面，我們要減少出錯提示（這會引起用戶反感），而另一方面，我們則希望得到足夠多的有效信息。魚和熊掌如何兼得？

寫一個簡單的表單驗證:https://www.jb51.net/article/185782.htm

從Google中，我們可以找到一些實用的方法：

設計合適的提示信息； 正則表達式篩選錯誤輸入。

如何將錯誤信息合適的展示給用戶，我想是見仁見智，需要根據(jù)具體項目具體分析（參考淘寶、京東等電商設計）。這里主要討論第二種方案：通過正則表達式最大限度的過濾用戶輸入

這里先列出我自己常用的正則表達式，然后在深入全面的學習它！

常用正則表達式

文本輸入（拒絕表情）：/^[u4e00-u9fa5w]+.*$/gi

密碼： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

中文地址（以中文開始，包含英文字符、數(shù)字、括號）：/^([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-9u4e00-u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/

傳真：/^(d{3,4}-)?d{7,8}$/

網(wǎng)址：/^([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}$/

通用驗證信息提示函數(shù)

/** * @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 = /bisb/g; // 全局匹配單詞is

構(gòu)造函數(shù)

var reg = new RegEXP(’bisb’,g)

2. 修飾符

g：global全文搜索，不添加，搜索到第一個匹配停止 默認false，只讀

i：ignore case 忽略大小寫， 默認false，只讀

m：multiple lines 多行搜索 默認false，只讀

lastIndex： 是當前表達式匹配內(nèi)容的最后一個字符的下一個位置

source：正則表達式的文本字符串

> var reg1 = /w/gim;> reg1.source< 'w' 3. 元字符

正則表達式由兩種基本字符類型組成：

原義文本字符

a,b,c,d..

元字符

*+？$ ^ . | （ ）{ } [ ]

t水平制表符 v垂直制表符 n換行符 r回車符 0空字符 f換頁符 4. 字符類 我們可以使用元字符 [] 來構(gòu)建一個簡單的類

所謂類是指符合某些特征的對象，一個泛指，不是特指某個字符

表達式[abc]把字符a或b或c歸為一類，表達式可以匹配這類字符

字符取反（^）

使用元字符 ^ 創(chuàng)建反向類

表達式[^abc] 表示 不是字符a或b或c的內(nèi)容

5. 范圍類

使用[a-z]來連接兩個字符表示從a到z的任意字符，閉區(qū)間，包含a 和 z 本身

> ’a1b2c3b4’.replace(/[a-z]/g, ’Q’);< 'Q1Q2Q3Q4'

范圍類可以連寫 [a-zA-Z]

> ’2015-11-5’.replace(/[0-9-]/g, ’A’)< 'AAAAAAAAA' 6.預定義類及邊界6.1 預定義類 字符 等價類 含義 . [^rn] 除了回車符和換行符以外的所有字符 d [0-9] 數(shù)字字符 D [^0-9] 非數(shù)字字符 s [tnx0Bfr] 空白字符 w [a-zA-Z_0-9] 單詞字符（字母數(shù)字下劃線） W [^a-zA-Z0-9_] 非單詞字符 6.2 邊界 字符 含義 ^ 以XXXXX開始 $ 以xxxx結(jié)束 b 單詞邊界 B 非單詞邊界 7. 量詞 字符 含義 ？ 出現(xiàn)零次或一次（最多出現(xiàn)1次） + 出現(xiàn)一次或多次 * 出現(xiàn)零次或多次（任意 {n} 出現(xiàn)n次 {n,m} 出現(xiàn)n到m次 {n,} 至少出現(xiàn)n次 8.貪婪模式與非貪婪模式8.1 貪婪模式

在正則表達式中，默認盡可能多的匹配

> ’1234678’.replace(/d{3,6}/g, ’X’)< 'X78'8.2 非貪婪模式

讓正則表達誰盡可能少的匹配，也就是說一旦成功匹配就不再繼續(xù)嘗試

做法很簡單，在量詞后面加一個 ？即可

> ’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'

忽略分組

不希望捕獲某些分組，只需要在分組內(nèi)加上 ？：

(?:Byron).(ok)

PS：這里再為大家提供2款非常方便的正則表達式工具供大家參考使用：

JavaScript正則表達式在線測試工具：http://tools.jb51.net/regex/javascript

正則表達式在線生成工具：http://tools.jb51.net/regex/create_reg

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery正則表達式用法總結(jié)》、《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。