一、HTML元素屬性與JavaScript對象屬性
我們知道，HTML允許我們?yōu)樵刂付ㄗ远x屬性。如對于表單中的文本輸入框元素，我們可以給它指定一個(gè)稱(chēng)為validator的屬性：
< form id="exampleForm" >
< input type="text" name="input1" validator="whatsThisFor?" > ... < /form >
該屬性將被瀏覽器的表現引擎忽略，即它對于頁(yè)面的顯示是沒(méi)有任何影響的。不過(guò)，就像所有其它“正式的”屬性一樣，自定義屬性對腳本語(yǔ)言也是可見(jiàn)的，即我們可以在JavaScript代碼中引用它并分析它的值。當然，在IE4和N4中引用元素的方法是不同的。下面這個(gè)引用自定義屬性的示例只能在IE4（及其更高版本）下工作，但其原理也適用于Netscape瀏覽器：
if(document.all.exampleForm.input1.validator=="whatsThisFor") alert("Hello !"); else ...如果屬性沒(méi)有定義，則試圖引用它時(shí)將返回空值，在if語(yǔ)句的表達式里它被視為false：
if(!document.all.exampleForm.input1.validator) alert("No validator!");下面我們來(lái)看看如何在表單驗證中應用這種自定義屬性。
二、正則表達式與模式匹配
許多表單驗證任務(wù)包含了模式匹配操作。例如我們要驗證這樣一個(gè)圖書(shū)編號值的合法性：它或者為5個(gè)數字字符，或為10個(gè)字符——5個(gè)數字，一個(gè)連字號，再加上4個(gè)數字。雖然這些驗證任務(wù)也可以用一個(gè)專(zhuān)用的函數來(lái)完成，但用下面這個(gè)正則表達式模式與用戶(hù)輸入值比較更為簡(jiǎn)便：
/d{5}(-d{4})?/ 如果你以前從來(lái)沒(méi)有用過(guò)正則表達式，可以將它理解為一種指定字符模式的語(yǔ)言，其主要操作就是匹配。大多數字符只同它們自己匹配，如正則表達式/abc/只匹配字符串“abc”；但也提供了引用某一組字符（如全部數字）以及指定匹配字符個(gè)數的方法。在上例中：d{5}匹配的是任意5個(gè)數字，-d{4}匹配的是一個(gè)連字號加4個(gè)數字，?說(shuō)明模式中的最后一個(gè)元素是可選的，可包含也可不包含。
三、正則表達式庫及其應用
所謂的正則表達式庫就是包含驗證常用表單元素的正則表達式的腳本文件，如：
var PatternsDict = new Object(); // 匹配圖書(shū)編號 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è)提供驗證功能的函數：
function validateForm(theForm){// 若驗證通過(guò)則返回true var elArr = theForm.elements; // 將表單中的所有元素放入數組 for(var i = 0; i < elArr.length; i++) with(elArr[i]){ // 對于表單中的每一個(gè)元素... var v = elArr[i].validator; // 獲取其validator屬性 if(!v) continue; // 如果該屬性不存在,忽略當前元素 var thePat = PatternsDict[v]; // 選擇驗證用的正則表達式 var gotIt = thePat.exec(value); // 用正則表達式驗證elArr[i]的值 if(!gotIt){ alert(name + ": 輸入值與正則表達式不匹配（" + v + " —— " + value + "）"); return false;} } return true; }validateForm函數檢查每一個(gè)表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開(kāi)頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個(gè)正則表達式都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關(guān)聯(lián)的正則表達式不匹配時(shí)返回null——此時(shí)腳本顯示警告對話(huà)框。在實(shí)際應用場(chǎng)合，為提高效率可以在執行驗證之前將這些正則表達式編譯。某些輸入域可能需要除了簡(jiǎn)單匹配之外更為復雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務(wù)建立一個(gè)函數庫。
設上述驗證模式文件為valPatterns.js，將它包含到所有必需用它來(lái)驗證輸入的頁(yè)面中，然后為每個(gè)輸入框指定合適的validator屬性即可。下面是應用上述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 >用正則表達式庫驗證表單示例.< /P > < FORM id = theForm onSubmit = "return validateForm(theForm)" Action = "javascript:showForm(theForm)" > 圖書(shū)編號: < 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 >
作 者 : 仙人掌工作室
本文介紹如何創(chuàng )建一個(gè)可用于任何Web頁(yè)面的“正則表達式庫”——通過(guò)將表單驗證代碼保存為一個(gè)獨立的文件，我們可以避免為不同表單重寫(xiě)類(lèi)似的驗證代碼，只需在HTML頁(yè)面中包含這個(gè)庫文件即可。
一、HTML元素屬性與JavaScript對象屬性
我們知道，HTML允許我們?yōu)樵刂付ㄗ远x屬性。如對于表單中的文本輸入框元素，我們可以給它指定一個(gè)稱(chēng)為validator的屬性：
< form id="exampleForm" > < input type="text" name="input1" validator="whatsThisFor?" > ... < /form >
該屬性將被瀏覽器的表現引擎忽略，即它對于頁(yè)面的顯示是沒(méi)有任何影響的。不過(guò)，就像所有其它“正式的”屬性一樣，自定義屬性對腳本語(yǔ)言也是可見(jiàn)的，即我們可以在JavaScript代碼中引用它并分析它的值。當然，在IE4和N4中引用元素的方法是不同的。下面這個(gè)引用自定義屬性的示例只能在IE4（及其更高版本）下工作，但其原理也適用于Netscape瀏覽器：
if(document.all.exampleForm.input1.validator=="whatsThisFor") alert("Hello !"); else ...如果屬性沒(méi)有定義，則試圖引用它時(shí)將返回空值，在if語(yǔ)句的表達式里它被視為false：
if(!document.all.exampleForm.input1.validator) alert("No validator!");下面我們來(lái)看看如何在表單驗證中應用這種自定義屬性。
二、正則表達式與模式匹配
許多表單驗證任務(wù)包含了模式匹配操作。例如我們要驗證這樣一個(gè)圖書(shū)編號值的合法性：它或者為5個(gè)數字字符，或為10個(gè)字符——5個(gè)數字，一個(gè)連字號，再加上4個(gè)數字。雖然這些驗證任務(wù)也可以用一個(gè)專(zhuān)用的函數來(lái)完成，但用下面這個(gè)正則表達式模式與用戶(hù)輸入值比較更為簡(jiǎn)便：
/d{5}(-d{4})?/ 如果你以前從來(lái)沒(méi)有用過(guò)正則表達式，可以將它理解為一種指定字符模式的語(yǔ)言，其主要操作就是匹配。大多數字符只同它們自己匹配，如正則表達式/abc/只匹配字符串“abc”；但也提供了引用某一組字符（如全部數字）以及指定匹配字符個(gè)數的方法。在上例中：d{5}匹配的是任意5個(gè)數字，-d{4}匹配的是一個(gè)連字號加4個(gè)數字，?說(shuō)明模式中的最后一個(gè)元素是可選的，可包含也可不包含。
三、正則表達式庫及其應用
所謂的正則表達式庫就是包含驗證常用表單元素的正則表達式的腳本文件，如：
var PatternsDict = new Object(); // 匹配圖書(shū)編號 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è)提供驗證功能的函數：
function validateForm(theForm){// 若驗證通過(guò)則返回true var elArr = theForm.elements; // 將表單中的所有元素放入數組 for(var i = 0; i < elArr.length; i++) with(elArr[i]){ // 對于表單中的每一個(gè)元素... var v = elArr[i].validator; // 獲取其validator屬性 if(!v) continue; // 如果該屬性不存在,忽略當前元素 var thePat = PatternsDict[v]; // 選擇驗證用的正則表達式 var gotIt = thePat.exec(value); // 用正則表達式驗證elArr[i]的值 if(!gotIt){ alert(name + ": 輸入值與正則表達式不匹配（" + v + " —— " + value + "）"); return false;} } return true; }validateForm函數檢查每一個(gè)表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開(kāi)頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個(gè)正則表達式都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關(guān)聯(lián)的正則表達式不匹配時(shí)返回null——此時(shí)腳本顯示警告對話(huà)框。在實(shí)際應用場(chǎng)合，為提高效率可以在執行驗證之前將這些正則表達式編譯。某些輸入域可能需要除了簡(jiǎn)單匹配之外更為復雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務(wù)建立一個(gè)函數庫。
設上述驗證模式文件為valPatterns.js，將它包含到所有必需用它來(lái)驗證輸入的頁(yè)面中，然后為每個(gè)輸入框指定合適的validator屬性即可。下面是應用上述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 >用正則表達式庫驗證表單示例.< /P > < FORM id = theForm onSubmit = "return validateForm(theForm)" Action = "javascript:showForm(theForm)" > 圖書(shū)編號: < 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 >
作 者 : 仙人掌工作室
本文介紹如何創(chuàng )建一個(gè)可用于任何Web頁(yè)面的“正則表達式庫”——通過(guò)將表單驗證代碼保存為一個(gè)獨立的文件，我們可以避免為不同表單重寫(xiě)類(lèi)似的驗證代碼，只需在HTML頁(yè)面中包含這個(gè)庫文件即可。
一、HTML元素屬性與JavaScript對象屬性
我們知道，HTML允許我們?yōu)樵刂付ㄗ远x屬性。如對于表單中的文本輸入框元素，我們可以給它指定一個(gè)稱(chēng)為validator的屬性：
< form id="exampleForm" > < input type="text" name="input1" validator="whatsThisFor?" > ... < /form >
該屬性將被瀏覽器的表現引擎忽略，即它對于頁(yè)面的顯示是沒(méi)有任何影響的。不過(guò)，就像所有其它“正式的”屬性一樣，自定義屬性對腳本語(yǔ)言也是可見(jiàn)的，即我們可以在JavaScript代碼中引用它并分析它的值。當然，在IE4和N4中引用元素的方法是不同的。下面這個(gè)引用自定義屬性的示例只能在IE4（及其更高版本）下工作，但其原理也適用于Netscape瀏覽器：
if(document.all.exampleForm.input1.validator=="whatsThisFor") alert("Hello !"); else ...如果屬性沒(méi)有定義，則試圖引用它時(shí)將返回空值，在if語(yǔ)句的表達式里它被視為false：
if(!document.all.exampleForm.input1.validator) alert("No validator!");下面我們來(lái)看看如何在表單驗證中應用這種自定義屬性。
二、正則表達式與模式匹配
許多表單驗證任務(wù)包含了模式匹配操作。例如我們要驗證這樣一個(gè)圖書(shū)編號值的合法性：它或者為5個(gè)數字字符，或為10個(gè)字符——5個(gè)數字，一個(gè)連字號，再加上4個(gè)數字。雖然這些驗證任務(wù)也可以用一個(gè)專(zhuān)用的函數來(lái)完成，但用下面這個(gè)正則表達式模式與用戶(hù)輸入值比較更為簡(jiǎn)便：
/d{5}(-d{4})?/ 如果你以前從來(lái)沒(méi)有用過(guò)正則表達式，可以將它理解為一種指定字符模式的語(yǔ)言，其主要操作就是匹配。大多數字符只同它們自己匹配，如正則表達式/abc/只匹配字符串“abc”；但也提供了引用某一組字符（如全部數字）以及指定匹配字符個(gè)數的方法。在上例中：d{5}匹配的是任意5個(gè)數字，-d{4}匹配的是一個(gè)連字號加4個(gè)數字，?說(shuō)明模式中的最后一個(gè)元素是可選的，可包含也可不包含。
三、正則表達式庫及其應用
所謂的正則表達式庫就是包含驗證常用表單元素的正則表達式的腳本文件，如：
var PatternsDict = new Object(); // 匹配圖書(shū)編號 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è)提供驗證功能的函數：
function validateForm(theForm){// 若驗證通過(guò)則返回true var elArr = theForm.elements; // 將表單中的所有元素放入數組 for(var i = 0; i < elArr.length; i++)
with(elArr[i]){ // 對于表單中的每一個(gè)元素... var v = elArr[i].validator; // 獲取其validator屬性
if(!v) continue; // 如果該屬性不存在,忽略當前元素
var thePat = PatternsDict[v]; // 選擇驗證用的正則表達式
var gotIt = thePat.exec(value); // 用正則表達式驗證elArr[i]的值
if(!gotIt){ alert(name + ": 輸入值與正則表達式不匹配（" + v + " —— " + value + "）");
return false;}
} return true; }
validateForm函數檢查每一個(gè)表單元素的validator屬性，若該屬性不存在，腳本忽略此元素并返回循環(huán)的開(kāi)頭。否則，從PatternDict中獲得當前元素的匹配模式。每一個(gè)正則表達式都有對應的RegExp對象，RegExp對象的exec()方法在參數與它所關(guān)聯(lián)的正則表達式不匹配時(shí)返回null——此時(shí)腳本顯示警告對話(huà)框。在實(shí)際應用場(chǎng)合，為提高效率可以在執行驗證之前將這些正則表達式編譯。某些輸入域可能需要除了簡(jiǎn)單匹配之外更為復雜的驗證。因此，除了模式庫之外，還可以為常用的驗證任務(wù)建立一個(gè)函數庫。
設上述驗證模式文件為valPatterns.js，將它包含到所有必需用它來(lái)驗證輸入的頁(yè)面中，然后為每個(gè)輸入框指定合適的validator屬性即可。下面是應用上述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 >用正則表達式庫驗證表單示例.< /P >
< FORM id = theForm onSubmit = "return validateForm(theForm)" Action = "javascript:showForm(theForm)" >
圖書(shū)編號: < 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 >
聯(lián)系客服
