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

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

寫一個(gè)簡(jiǎn)單的表單驗(yàn)證:https://www.jb51.net/article/185782.htm

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

設(shè)計(jì)合適的提示信息； 正則表達(dá)式篩選錯(cuò)誤輸入。

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

這里先列出我自己常用的正則表達(dá)式，然后在深入全面的學(xué)習(xí)它！

常用正則表達(dá)式

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

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

中文地址（以中文開(kāi)始，包含英文字符、數(shù)字、括號(hào)）：/^([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-~/])+$/

座機(jī)：/^((d{3,4})|d{3,4}-|s)?d{7,14}$/

手機(jī)：/^1[34578]d{9}$/

郵編：/^[1-9][0-9]{5}$/

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

/** * @param {Object} $input 需要驗(yàn)證的輸入項(xiàng) * @param {String} reg 正則表達(dá)式 * @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}$/, ’*請(qǐng)輸入正確的郵編！’);深入學(xué)習(xí)正則表達(dá)式1. RegExp對(duì)象

有兩種方法實(shí)例化RegExp對(duì)象

字面量

var reg = /bisb/g; // 全局匹配單詞is

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

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

2. 修飾符

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

i：ignore case 忽略大小寫， 默認(rèn)false，只讀

m：multiple lines 多行搜索 默認(rèn)false，只讀

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

source：正則表達(dá)式的文本字符串

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

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

原義文本字符

a,b,c,d..

元字符

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

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

所謂類是指符合某些特征的對(duì)象，一個(gè)泛指，不是特指某個(gè)字符

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

字符取反（^）

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

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

5. 范圍類

使用[a-z]來(lái)連接兩個(gè)字符表示從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.預(yù)定義類及邊界6.1 預(yù)定義類 字符 等價(jià)類 含義 . [^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開(kāi)始 $ 以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 貪婪模式

在正則表達(dá)式中，默認(rèn)盡可能多的匹配

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

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

做法很簡(jiǎn)單，在量詞后面加一個(gè) ？即可

> ’123456789’.match(/d{3,5}?/g)< ['123','456','789']9. 分組9.1 分組

使用 （）可以達(dá)到分組的功能，使量詞作用于分組

> ’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款非常方便的正則表達(dá)式工具供大家參考使用：

JavaScript正則表達(dá)式在線測(cè)試工具：http://tools.jb51.net/regex/javascript

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

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。