本文介紹如何創(chuàng)建一個(gè)可用于任何Web頁(yè)面的“正則表達(dá)式庫(kù)”——通過(guò)將表單驗(yàn)證代碼保存為一個(gè)獨(dú)立的文件，我們可以避免為不同表單重寫類似的驗(yàn)證代碼，只需在HTML頁(yè)面中包含這個(gè)庫(kù)文件即可。

　　 一、HTML元素屬性與JavaScript對(duì)象屬性

　　 我們知道，HTML允許我們?yōu)樵刂付ㄗ远x屬性。如對(duì)于表單中的文本輸入框元素，我們可以給它指定一個(gè)稱為validator的屬性：

　　<　form id="exampleForm" >
　　<　input type="text" name="input1" validator="whatsThisFor?" >
　　...
　<　/form >

　　 該屬性將被瀏覽器的表現(xiàn)引擎忽略，即它對(duì)于頁(yè)面的顯示是沒(méi)有任何影響的。不過(guò)，就像所有其它“正式的”屬性一樣，自定義屬性對(duì)腳本語(yǔ)言也是可見(jiàn)的，即我們可以在JavaScript代碼中引用它并分析它的值。當(dāng)然，在IE4和N4中引用元素的方法是不同的。下面這個(gè)引用自定義屬性的示例只能在IE4（及其更高版本）下工作，但其原理也適用于Netscape瀏覽器：

　if(document.all.exampleForm.input1.validator=="whatsThisFor")
　　alert("Hello !");
　else ...

　　 如果屬性沒(méi)有定義，則試圖引用它時(shí)將返回空值，在if語(yǔ)句的表達(dá)式里它被視為false：

　if(!document.all.exampleForm.input1.validator)
　　alert("No validator!");

　　 下面我們來(lái)看看如何在表單驗(yàn)證中應(yīng)用這種自定義屬性。

　　 二、正則表達(dá)式與模式匹配

　　 許多表單驗(yàn)證任務(wù)包含了模式匹配操作。例如我們要驗(yàn)證這樣一個(gè)圖書編號(hào)值的合法性：它或者為5個(gè)數(shù)字字符，或?yàn)?0個(gè)字符——5個(gè)數(shù)字，一個(gè)連字號(hào)，再加上4個(gè)數(shù)字。雖然這些驗(yàn)證任務(wù)也可以用一個(gè)專用的函數(shù)來(lái)完成，但用下面這個(gè)正則表達(dá)式模式與用戶輸入值比較更為簡(jiǎn)便：

　 /d{5}(-d{4})?/

　　 如果你以前從來(lái)沒(méi)有用過(guò)正則表達(dá)式，可以將它理解為一種指定字符模式的語(yǔ)言，其主要操作就是匹配。大多數(shù)字符只同它們自己匹配，如正則表達(dá)式/abc/只匹配字符串“abc”；但也提供了引用某一組字符（如全部數(shù)字）以及指定匹配字符個(gè)數(shù)的方法。在上例中：d{5}匹配的是任意5個(gè)數(shù)字，-d{4}匹配的是一個(gè)連字號(hào)加4個(gè)數(shù)字，?說(shuō)明模式中的最后一個(gè)元素是可選的，可包含也可不包含。

　　 三、正則表達(dá)式庫(kù)及其應(yīng)用

　　 所謂的正則表達(dá)式庫(kù)就是包含驗(yàn)證常用表單元素的正則表達(dá)式的腳本文件，如：

　var PatternsDict = new Object();
　// 匹配圖書編號(hào)
　PatternsDict.bookPat = /^d{5}(-d{4})?$/;
　// 匹配12:34以及75:83
　PatternsDict.timePat = /^d{2}:d{2}$/;
　// 匹配5:04 或12:34,但不匹配75:83
　PatternsDict.timePat2=/^([1-9]|1[0-2]):[0-5]d$/;

　　 文件中還要包含下面這個(gè)提供驗(yàn)證功能的函數(shù)：

　function validateForm(theForm){// 若驗(yàn)證通過(guò)則返回true
　 var elArr = theForm.elements; // 將表單中的所有元素放入數(shù)組
　 for(var i = 0; i < elArr.length; i++)
　　with(elArr[i]){　　　　　　　// 對(duì)于表單中的每一個(gè)元素...
　　 var v = elArr[i].validator; // 獲取其validator屬性
　　 if(!v) continue;　　　　　　// 如果該屬性不存在,忽略當(dāng)前元素
　　 var thePat = PatternsDict[v];　 // 選擇驗(yàn)證用的正則表達(dá)式
　　 var gotIt = thePat.exec(value); // 用正則表達(dá)式驗(yàn)證elArr[i]的值
　　 if(!gotIt){
　　　alert(name + ": 輸入值與正則表達(dá)式不匹配（" + v + " —— " + value + "）"); return false;}
　　} return true;
　 }

　　 validateForm函數(shù)檢查每一個(gè)表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開(kāi)頭。否則，從PatternDict中獲得當(dāng)前元素的匹配模式。每一個(gè)正則表達(dá)式都有對(duì)應(yīng)的RegExp對(duì)象，RegExp對(duì)象的exec()方法在參數(shù)與它所關(guān)聯(lián)的正則表達(dá)式不匹配時(shí)返回null——此時(shí)腳本顯示警告對(duì)話框。在實(shí)際應(yīng)用場(chǎng)合，為提高效率可以在執(zhí)行驗(yàn)證之前將這些正則表達(dá)式編譯。某些輸入域可能需要除了簡(jiǎn)單匹配之外更為復(fù)雜的驗(yàn)證。因此，除了模式庫(kù)之外，還可以為常用的驗(yàn)證任務(wù)建立一個(gè)函數(shù)庫(kù)。

　　 設(shè)上述驗(yàn)證模式文件為valPatterns.js，將它包含到所有必需用它來(lái)驗(yàn)證輸入的頁(yè)面中，然后為每個(gè)輸入框指定合適的validator屬性即可。下面是應(yīng)用上述valPatterns.js的一個(gè)完整示例：

　<　HTML　><　HEAD　>
　<　TITLE　> formVal.HTM <　/TITLE　>
　<　SCRIPT src=" ValPatterns.js" >
　<　/SCRIPT　>
　<　SCRIPT　>
　function showForm(theForm){
　 alert("表單：" + theForm.id + "已經(jīng)提交");
　}
　<　/SCRIPT　><　/HEAD　>
　
　<　BODY　><　P　>用正則表達(dá)式庫(kù)驗(yàn)證表單示例.<　/P　>
　<　FORM id = theForm onSubmit = "return validateForm(theForm)"
　　Action = "javascript:showForm(theForm)" >
　圖書編號(hào):
　<　INPUT TYPE=TEXT name=book value="12345-6789" validator=bookPat >< BR >
　時(shí) 間 值:
　<　INPUT TYPE=TEXT name=time value="12:45" validator=timePat2 > < BR >
　單擊按鈕提交表單：
　<　INPUT TYPE = SUBMIT >
　<　/FORM >
　<　/BODY >< /HTML >

• javascript
• 表單
• 正則表達(dá)式