一、HTML元素屬性與JavaScript對象屬性

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

　  <  form id="exampleForm" >　  

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

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

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

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

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

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

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

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

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

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

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

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

　var PatternsDict = new Object();　// 匹配圖書編號　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$/;

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

　function validateForm(theForm){// 若驗(yàn)證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數(shù)組　 for(var i = 0; i < elArr.length; i++)　  with(elArr[i]){              // 對于表單中的每一個元素...　   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ù)檢查每一個表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開頭。否則，從PatternDict中獲得當(dāng)前元素的匹配模式。每一個正則表達(dá)式都有對應(yīng)的RegExp對象，RegExp對象的exec()方法在參數(shù)與它所關(guān)聯(lián)的正則表達(dá)式不匹配時返回null——此時腳本顯示警告對話框。在實(shí)際應(yīng)用場合，為提高效率可以在執(zhí)行驗(yàn)證之前將這些正則表達(dá)式編譯。某些輸入域可能需要除了簡單匹配之外更為復(fù)雜的驗(yàn)證。因此，除了模式庫之外，還可以為常用的驗(yàn)證任務(wù)建立一個函數(shù)庫。

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

　<  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á)式庫驗(yàn)證表單示例.<  /P  >　<  FORM id = theForm onSubmit = "return validateForm(theForm)" 　  Action = "javascript:showForm(theForm)" >　圖書編號: 　<  INPUT TYPE=TEXT name=book value="12345-6789" validator=bookPat >< BR >　時 間 值:　<  INPUT TYPE=TEXT name=time value="12:45" validator=timePat2 > < BR >　單擊按鈕提交表單：　<  INPUT TYPE = SUBMIT >　<  /FORM >　<  /BODY >< /HTML >

作 者 : 仙人掌工作室

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

　　 一、HTML元素屬性與JavaScript對象屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

　var PatternsDict = new Object();　// 匹配圖書編號　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$/;

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

　function validateForm(theForm){// 若驗(yàn)證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數(shù)組　 for(var i = 0; i < elArr.length; i++)　  with(elArr[i]){              // 對于表單中的每一個元素...　   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ù)檢查每一個表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開頭。否則，從PatternDict中獲得當(dāng)前元素的匹配模式。每一個正則表達(dá)式都有對應(yīng)的RegExp對象，RegExp對象的exec()方法在參數(shù)與它所關(guān)聯(lián)的正則表達(dá)式不匹配時返回null——此時腳本顯示警告對話框。在實(shí)際應(yīng)用場合，為提高效率可以在執(zhí)行驗(yàn)證之前將這些正則表達(dá)式編譯。某些輸入域可能需要除了簡單匹配之外更為復(fù)雜的驗(yàn)證。因此，除了模式庫之外，還可以為常用的驗(yàn)證任務(wù)建立一個函數(shù)庫。

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

　<  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á)式庫驗(yàn)證表單示例.<  /P  >　<  FORM id = theForm onSubmit = "return validateForm(theForm)" 　  Action = "javascript:showForm(theForm)" >　圖書編號: 　<  INPUT TYPE=TEXT name=book value="12345-6789" validator=bookPat >< BR >　時 間 值:　<  INPUT TYPE=TEXT name=time value="12:45" validator=timePat2 > < BR >　單擊按鈕提交表單：　<  INPUT TYPE = SUBMIT >　<  /FORM >　<  /BODY >< /HTML >

作 者 : 仙人掌工作室

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

　　 一、HTML元素屬性與JavaScript對象屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

　var PatternsDict = new Object();　// 匹配圖書編號　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$/;

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

　function validateForm(theForm){// 若驗(yàn)證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數(shù)組　 

 for(var i = 0; i < elArr.length; i++)　  

with(elArr[i]){              // 對于表單中的每一個元素...　   

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

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

　<  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á)式庫驗(yàn)證表單示例.<  /P  >　

<  FORM id = theForm onSubmit = "return validateForm(theForm)" 　  Action = "javascript:showForm(theForm)" >　

圖書編號: 　<  INPUT TYPE=TEXT name=book value="12345-6789" validator=bookPat >< BR >　

時 間 值:　<  INPUT TYPE=TEXT name=time value="12:45" validator=timePat2 > < BR >　

單擊按鈕提交表單：　<  INPUT TYPE = SUBMIT >　

<  /FORM >　

<  /BODY >

< /HTML >