用JS與正則表達(dá)式驗(yàn)證表單數(shù)據(jù)格式的方法

根據(jù)表單數(shù)據(jù)項(xiàng)的實(shí)際內(nèi)容不同一般都有一個標(biāo)準(zhǔn)的數(shù)據(jù)格式要求，當(dāng)表單數(shù)據(jù)準(zhǔn)備提交到服務(wù)器之前我們應(yīng)該在客戶端先進(jìn)行校驗(yàn)，格式合格再交到服務(wù)器進(jìn)行進(jìn)一步處理，如果格式不合格就先彈出錯誤提示并不提交，這樣不僅能提高網(wǎng)頁與用戶的交互效率還能減輕服務(wù)器處理的負(fù)擔(dān)。一般來講這個客戶端進(jìn)行的格式校驗(yàn)可以使用JS結(jié)合正則表達(dá)式來完成。

一、什么是正則表達(dá)式

正則表達(dá)式英文全稱是Regular Expression，簡稱regexp。是一種描述字符串結(jié)構(gòu)的語法規(guī)則，是一個特定的格式化模式，它可以匹配、替換、截取匹配的字符串。

二、正則表達(dá)式的語法規(guī)則

1.正則表達(dá)式變量的定義

JS風(fēng)格： var re=new RegExp（‘a(chǎn)’）；

Perl風(fēng)格：var re=/a/

以上對比可見perl風(fēng)格代碼簡單方便，所以我們一般使用perl風(fēng)格。

2.正則表達(dá)式的首尾定位符

^ ：匹配字符串的開始位置。

$ ：匹配字符串的結(jié)束位置。

如^ab，代表匹配以ab開頭的字符串，x$，代表匹配以x結(jié)尾的字符串。

3.單個字符[]

如[m]代表匹配小寫字母m，如果不區(qū)分大小寫就寫成[Mm]，代表匹配一個字符M或m

4.選擇字符 |

選擇字符理解為“或”，如匹配數(shù)字1或小寫h就可以寫成（1|h）

5.連字符-

連字符用于指定一個字符范圍，如[a-z]代表a到z之間的任意一個小寫字母。

6.限定符？*+{n，m}

？ 匹配前面的字符零次或一次

+ 匹配前面的字符一次或多次

* 匹配前面的字符零次或多次

{n} 匹配前面的字符n次

{n，} 匹配前面的字符最少n次

{n，m}匹配前面的字符最少n次，最多m次

7.點(diǎn)字符.

匹配換行符以外的任意一個字符

8.轉(zhuǎn)義符

將特殊字符變?yōu)槠胀ㄗ址缙ヅ潼c(diǎn)字符本身就可以使用＼.

9.括號字符（ ）

用于限定范圍或分組，

如（th|tr）s代表匹配ths或者trs，如果去掉括號寫成th|trs就代表匹配th或者trs了。

（[0-9]a）{3}，代表將[0-9]a一起重復(fù)3次，如果去掉括號寫成[0-9]a{3}就代表將a重復(fù)3次了。

三、驗(yàn)證表單數(shù)據(jù)的正則表單式寫法

以某注冊表單為例，表單的html代碼如下：

1.手機(jī)號的正則表達(dá)式寫法。漢字規(guī)則描述：號碼共有11位數(shù)字，第一位數(shù)字只能是1，第二位只能是3或5或8，第3到11位可以是任意數(shù)字字符。正則表達(dá)式描述：

2.身份證號的正則表達(dá)式寫法。漢字規(guī)則描述：一共18位數(shù)字，前6位是區(qū)號，其中第一位只能是0到8。中間4位年份，其中前2位只考慮19或20。2位月份，第一位只能是0或1。兩位日期，第一位可以是0到3。3位順序碼是任意數(shù)字。1位校驗(yàn)碼是0到9的數(shù)字或字母X。

正則表達(dá)式描述：

3.郵箱的正則表達(dá)式寫法。漢字規(guī)則描述：第一部分有一串英文字母、數(shù)字或下劃線，第二部分是“@”，第三部分是一串字母或數(shù)字，第四部分是點(diǎn)“.” ，第五部分是一串字母。以上的英文都大小寫均可。

正則表達(dá)式描述：/^＼w+@[a-z0-9]+＼.[a-z]+/i$/

以上表達(dá)式中的參數(shù)/i表示字母的大小寫均可。

四、設(shè)計(jì)JS代碼實(shí)現(xiàn)表單提交的數(shù)據(jù)校驗(yàn)

<五、小結(jié)

將以上表單網(wǎng)頁運(yùn)行并輸入數(shù)據(jù)進(jìn)行測試，發(fā)現(xiàn)只要格式不合格的均彈出錯誤提示框并停留在本網(wǎng)頁，只有數(shù)據(jù)格式輸入規(guī)范的情況下才能跳轉(zhuǎn)并提交到網(wǎng)頁doRegister.php進(jìn)行處理。做到了低級格式錯誤在客戶端完成，即提高了用戶的交互效率也減輕了服務(wù)端的負(fù)擔(dān)。這些都是利用JS結(jié)合正則表單式實(shí)現(xiàn)的。

（作者單位：武漢城市職業(yè)學(xué)院）