建立JavaScriptRegex庫簡化表單驗證

建立JavaScriptRegex庫簡化表單驗證

作 者 : 仙人掌工作室

　　 本文介紹如何建立一個可用於任何Web頁面的“Regex庫”——通過將表單驗證代碼儲存為一個獨立的檔案，我們可以避免為不同表單重寫類似的驗證代碼，只需在HTML頁面中包含這個庫檔案即可。

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

　　 我們知道，HTML允許我們為元素指定自訂屬性。如對於表單中的文本輸入框元素，我們可以給它指定一個稱為validator的屬性：

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

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

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

　　 如果屬性沒有定義，則試圖引用它時將返回空值，在if語句的運算式裡它被視為false：

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

　　 下面我們來看看如何在表單驗證中應用這種自訂屬性。

　　 二、Regex與模式比對

　　 許多表單驗證任務包含了模式比對操作。例如我們要驗證這樣一個圖書編號值的合法性：它或者為5個數字字元，或為10個字元——5個數字，一個連字號，再加上4個數字。雖然這些驗證任務也可以用一個專用的函數來完成，但用下面這個Regex模式與使用者輸入值比較更為簡便：

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

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

　　 三、Regex庫及其應用

　　 所謂的Regex庫就是包含驗證常用表單元素的Regex的指令檔，如：

　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$/;

　　 檔案中還要包含下面這個提供驗證功能的函數：

　function validateForm(theForm){// 若驗證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數組　 for(var i = 0; i < elArr.length; i++)　  with(elArr[i]){              // 對於表單中的每一個元素...　   var v = elArr[i].validator; // 擷取其validator屬性　   if(!v) continue;            // 如果該屬性不存在,忽略當前元素　   var thePat = PatternsDict[v];   // 選擇驗證用的Regex　   var gotIt = thePat.exec(value); // 用Regex驗證elArr[i]的值　   if(!gotIt){　    alert(name + ": 輸入值與Regex不匹配（" + v + " —— " + value + "）"); return false;}　  } return true;　 }

　　 validateForm函數檢查每一個表單元素的validator屬性，若該屬性不存在，指令碼忽略此元素並返回迴圈的開頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個Regex都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關聯的Regex不匹配時返回null——此時指令碼顯示警告對話方塊。在實際應用場合，為提高效率可以在執行驗證之前將這些Regex編譯。某些輸入欄位可能需要除了簡單匹配之外更為複雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務建立一個函數庫。

　　 設上述驗證模式檔案為valPatterns.js，將它包含到所有必需用它來驗證輸入的頁面中，然後為每個輸入框指定合適的validator屬性即可。下面是應用上述valPatterns.js的一個完整樣本：

　<  HTML  ><  HEAD  >　<  TITLE  > formVal.HTM <  /TITLE  >　<  SCRIPT src=" ValPatterns.js" >　<  /SCRIPT  >　<  SCRIPT  >　function showForm(theForm){　 alert("表單：" + theForm.id + "已經提交");　}　<  /SCRIPT  ><  /HEAD  >　　<  BODY  ><  P  >用Regex庫驗證表單樣本.<  /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 >

作 者 : 仙人掌工作室

　　 本文介紹如何建立一個可用於任何Web頁面的“Regex庫”——通過將表單驗證代碼儲存為一個獨立的檔案，我們可以避免為不同表單重寫類似的驗證代碼，只需在HTML頁面中包含這個庫檔案即可。

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

　　 我們知道，HTML允許我們為元素指定自訂屬性。如對於表單中的文本輸入框元素，我們可以給它指定一個稱為validator的屬性：

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

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

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

　　 如果屬性沒有定義，則試圖引用它時將返回空值，在if語句的運算式裡它被視為false：

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

　　 下面我們來看看如何在表單驗證中應用這種自訂屬性。

　　 二、Regex與模式比對

　　 許多表單驗證任務包含了模式比對操作。例如我們要驗證這樣一個圖書編號值的合法性：它或者為5個數字字元，或為10個字元——5個數字，一個連字號，再加上4個數字。雖然這些驗證任務也可以用一個專用的函數來完成，但用下面這個Regex模式與使用者輸入值比較更為簡便：

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

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

　　 三、Regex庫及其應用

　　 所謂的Regex庫就是包含驗證常用表單元素的Regex的指令檔，如：

　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$/;

　　 檔案中還要包含下面這個提供驗證功能的函數：

　function validateForm(theForm){// 若驗證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數組　 for(var i = 0; i < elArr.length; i++)　  with(elArr[i]){              // 對於表單中的每一個元素...　   var v = elArr[i].validator; // 擷取其validator屬性　   if(!v) continue;            // 如果該屬性不存在,忽略當前元素　   var thePat = PatternsDict[v];   // 選擇驗證用的Regex　   var gotIt = thePat.exec(value); // 用Regex驗證elArr[i]的值　   if(!gotIt){　    alert(name + ": 輸入值與Regex不匹配（" + v + " —— " + value + "）"); return false;}　  } return true;　 }

　　 validateForm函數檢查每一個表單元素的validator屬性，若該屬性不存在，指令碼忽略此元素並返回迴圈的開頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個Regex都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關聯的Regex不匹配時返回null——此時指令碼顯示警告對話方塊。在實際應用場合，為提高效率可以在執行驗證之前將這些Regex編譯。某些輸入欄位可能需要除了簡單匹配之外更為複雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務建立一個函數庫。

　　 設上述驗證模式檔案為valPatterns.js，將它包含到所有必需用它來驗證輸入的頁面中，然後為每個輸入框指定合適的validator屬性即可。下面是應用上述valPatterns.js的一個完整樣本：

　<  HTML  ><  HEAD  >　<  TITLE  > formVal.HTM <  /TITLE  >　<  SCRIPT src=" ValPatterns.js" >　<  /SCRIPT  >　<  SCRIPT  >　function showForm(theForm){　 alert("表單：" + theForm.id + "已經提交");　}　<  /SCRIPT  ><  /HEAD  >　　<  BODY  ><  P  >用Regex庫驗證表單樣本.<  /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 >

作 者 : 仙人掌工作室

　　 本文介紹如何建立一個可用於任何Web頁面的“Regex庫”——通過將表單驗證代碼儲存為一個獨立的檔案，我們可以避免為不同表單重寫類似的驗證代碼，只需在HTML頁面中包含這個庫檔案即可。

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

　　 我們知道，HTML允許我們為元素指定自訂屬性。如對於表單中的文本輸入框元素，我們可以給它指定一個稱為validator的屬性：

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

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

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

　　 如果屬性沒有定義，則試圖引用它時將返回空值，在if語句的運算式裡它被視為false：

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

　　 下面我們來看看如何在表單驗證中應用這種自訂屬性。

　　 二、Regex與模式比對

　　 許多表單驗證任務包含了模式比對操作。例如我們要驗證這樣一個圖書編號值的合法性：它或者為5個數字字元，或為10個字元——5個數字，一個連字號，再加上4個數字。雖然這些驗證任務也可以用一個專用的函數來完成，但用下面這個Regex模式與使用者輸入值比較更為簡便：

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

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

　　 三、Regex庫及其應用

　　 所謂的Regex庫就是包含驗證常用表單元素的Regex的指令檔，如：

　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$/;

　　 檔案中還要包含下面這個提供驗證功能的函數：

　function validateForm(theForm){// 若驗證通過則返回true　 var elArr = theForm.elements; // 將表單中的所有元素放入數組　 for(var i = 0; i < elArr.length; i++)　  with(elArr[i]){              // 對於表單中的每一個元素...　   var v = elArr[i].validator; // 擷取其validator屬性　   if(!v) continue;            // 如果該屬性不存在,忽略當前元素　   var thePat = PatternsDict[v];   // 選擇驗證用的Regex　   var gotIt = thePat.exec(value); // 用Regex驗證elArr[i]的值　   if(!gotIt){　    alert(name + ": 輸入值與Regex不匹配（" + v + " —— " + value + "）"); return false;}　  } return true;　 }

　　 validateForm函數檢查每一個表單元素的validator屬性，若該屬性不存在，指令碼忽略此元素並返回迴圈的開頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個Regex都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關聯的Regex不匹配時返回null——此時指令碼顯示警告對話方塊。在實際應用場合，為提高效率可以在執行驗證之前將這些Regex編譯。某些輸入欄位可能需要除了簡單匹配之外更為複雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務建立一個函數庫。

　　 設上述驗證模式檔案為valPatterns.js，將它包含到所有必需用它來驗證輸入的頁面中，然後為每個輸入框指定合適的validator屬性即可。下面是應用上述valPatterns.js的一個完整樣本：

　<  HTML  ><  HEAD  >　<  TITLE  > formVal.HTM <  /TITLE  >　<  SCRIPT src=" ValPatterns.js" >　<  /SCRIPT  >　<  SCRIPT  >　function showForm(theForm){　 alert("表單：" + theForm.id + "已經提交");　}　<  /SCRIPT  ><  /HEAD  >　　<  BODY  ><  P  >用Regex庫驗證表單樣本.<  /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 >

轉載自Chinabyte網路學院

正則測試地址
http://www.hubro.net/zz.asp