客戶端控件Javascript驗證類
2005-09-20
javascritp一直是web開發(fā)的利器，在Ajax逐漸流行以后，javascript又更煥發(fā)活力。但是別誤會，本文不討論如何用javascript實現(xiàn)Ajax，而僅僅討論javascript的常用功能－如何用javascript編寫更高效和易用的客戶端控件驗證類。
通過使用javascript在客戶端驗證輸入值的有效性，能夠有效的保證數(shù)據(jù)的有效性，并減輕了服務器端驗證給服務器帶來的負擔。下面介紹兩種驗證模式。
通常的驗證模式是“函數(shù)式”驗證，由兩部分組成：
1、驗證函數(shù)庫：
1 /*包括在validator.js文件中*/
2 /*****************************************************************************
3 函數(shù)名稱：fucCheckNull
4 函數(shù)功能：檢查是否為空
5 參數(shù) ：strTemp 要檢查的字符串
6 參數(shù) ：strAlertMsg 要顯示的提示信息
7 返回 ：消息提示框 true/false
8 日期 ：2003-10-17
9 作者 ：xxx
10 修改人 ：
11 修改日 ：
12 ******************************************************************************/
13 function fucCheckNull(strTemp,strAlertMsg)
14 {
15 strTemp=strTemp.replace(/^(\s)*|(\s)*$/g,"");//去掉字符串兩邊的空格
16 if (strTemp.length<1)
17 {
18 alert(strAlertMsg);
19 return false;
20 }
21 }
2、頁面中調用驗證函數(shù)進行驗證
1 <SCRIPT language=javascript
2 src＝"validator.js"></SCRIPT>
3 <script language="javascript" type="text/javascript">
4 <!--
5 //標識頁面是否已提交
6 var subed = false;
7
8 function check()
9 {
10 //驗證是否重復提交
11 if (subed == true)
12 {
13 alert("信息正在發(fā)送給服務器，請不要重復提交信息！");
14 return false;
15 }
16
17 //驗證活動名稱是否為空
18 if(fucCheckNull(document.Add.txbMaName.value,"活動名稱不能為空")==false)
19 {
20 return false;
21 }
22
23 //驗證活動名稱字符不超過30
24 if(fucCheckLength(document.Add.txbMaName.value,60,"輸入的活動名稱長度超出60個字符")==false)
25 {
26 return false;
27 }
28
29 //驗證活動時間是否為空
30 if(fucCheckNull(document.Add.dtMaTime_txbDate.value,"活動時間不能為空")==false)
31 {
32 return false;
33 }
34
35 //驗證活動地點是否為空
36 if(fucCheckNull(document.Add.txbMaPlace.value,"活動地點不能為空")==false)
37 {
38 return false;
39 }
40 //驗證活動介紹上傳是否為空
41 if(fucCheckNull(document.Add.InputFileOne.value,"活動介紹不能為空")==false)
42 {
43 return false;
44 }
45
46 subed == true;
47 }
48 -->
49 </script>
這種方式的優(yōu)點是使用簡單，容易理解，并且使用函數(shù)庫也容易擴充，當有新增驗證需要的時候只要編寫響應的驗證函數(shù)就可以了，比如說fucCheckEmail（strEmail, strAlertMessage），但這也帶來了很多問題。
（1）函數(shù)庫日益龐大：因為驗證函數(shù)庫以函數(shù)增量的方式來滿足不斷增加的驗證需求。
（2）頁面仍需不少編碼：大量的if, return, focus；
（3）頁面邏輯結構差：一段非常簡單的代碼卻包含了多個return；
（4）不便應用于內容管理模板
2、使用封裝的javascript驗證類進行驗證：
下面代碼演示了在頁面中使用JSClientValidator進行驗證的代碼模式：
1 <script language="javascript" src="clientvalidator.js"></script>
2 <script language="javascript">
3 function Validate()
4 {
5 var validator = new ClientValidator();
6
7 validator.AddEmpty(
8 document.getElementById("txbEmpty"), null, "為空驗證欄不能為空");
9
10 validator.AddLength(
11 document.getElementById("txbLength"), null, true, "長度驗證不能為空",
12 3, 6, "長度驗證錯誤"
13 );
14 validator.AddEqual(
15 document.getElementById("txbEqual1"), null, false, "相等驗證欄1不能為空",
16 document.getElementById("txbEqual2"), null, false, "相等驗證欄2不能為空",
17 "相等匹配錯誤"
18 );
19 validator.AddType(
20 document.getElementById("txbEmail"), null, true, "Email驗證欄不能為空",
21 "client.email", null, "Email格式錯誤"
22 );
23 validator.AddType(
24 document.getElementById("txbDigit"), null, true, "數(shù)字驗證欄不能為空",
25 "client.digit", null, "數(shù)字格式錯誤"
26 );
27 validator.AddType(
28 document.getElementById("txbInt"), null, true, "整數(shù)驗證欄不能為空",
29 "client.int", null, "整數(shù)格式錯誤"
30 );
31 validator.AddType(
32 document.getElementById("txbUInt"), null, true, "正整數(shù)驗證欄不能為空",
33 "client.uint", null, "正整數(shù)格式錯誤"
34 );
35 validator.AddType(
36 document.getElementById("txbDate"), null, true, "日期驗證欄不能為空",
37 "client.date", null, "日期格式錯誤"
38 );
39 validator.AddType(
40 document.getElementById("txbTime"), null, true, "時間驗證欄不能為空",
41 "client.time", null, "時間格式錯誤"
42 );
43
44
45 if (validator.RunValidate() == true)
46 {
47 window.alert("校驗成功");
48 }
49 else
50 {
51 window.alert(validator.lastErrorMessage);
52
53 validator.lastErrorControl.focus();
54 }
55 }
56 </script>
讀者可以發(fā)現(xiàn)上面javascript代碼所驗證的情況是非常極端的，總共了涉及9種驗證，包括是否為空、長度、相等、email、數(shù)字、整數(shù)、正整數(shù)、時間和日期格式的驗證。使用者通過AddXXX把驗證項加到JSClientValidator的驗證隊列中，然后調用JSValidateClient::RunValidate()進行統(tǒng)一認證，當驗證錯誤時，可提示驗證錯誤信息，并且focus到出錯的控件上。
這種驗證模式解決了“函數(shù)式”驗證模式的缺點，為了支持更多格式的驗證，JSClientValidator設計成支持自定義正則式驗證和自定義函數(shù)驗證。當遇到新的驗證格式要求時，程序員只要編寫響應的正則表達式注冊到JSClientValidator中就可以了，不用編寫額外的驗證函數(shù)；當然你也可以用自定的函數(shù)注冊到JSClientValidator中，進行驗證，只要函數(shù)定義遵守JSClientValidator的自定義函數(shù)定義接口就可以了。
