JSClientValidator-客戶端javascript驗證新模式
JSClientValidator-客戶端javascript驗證新模式
2005-09-21
在客戶端控件javascript驗證模式中，我已經(jīng)介紹了當(dāng)前大量在web上用于客戶端控件驗證的函數(shù)式驗證模式，也簡單的提出了使用封裝的javascript類驗證的方法。這次，我要向大家介紹的是如何使用JSClientValidator類進行客戶端控件驗證、JSClientValidator的設(shè)計思想、優(yōu)點和進行自動化驗證的設(shè)想。
內(nèi)容
JSClientValidator的設(shè)計思想
如何使用JSClientValidator進行客戶端控件驗證
自動javascript驗證設(shè)想
JSClientValidator.js下載：/Files/chwkai/ClientValidator.rar
JSClientValidator的設(shè)計思想
JSClientValidator類是為了更簡化script驗證代碼而編寫的。首先來看一段經(jīng)典的函數(shù)式j(luò)avascript驗證代碼段：
1 <script language="javascript">
2 <!--
3 function ValidateInput()
4 {
5 // fucCheckNull為判斷輸入字符串是否為空的函數(shù)
6 if (fucCheckNull(document.getElementById("txbName").value) == true)
7 {
8 window.alert("請輸入用戶名");
9 document.getElementById("txbName").focus;
10
11 return false;
12 }
13
14 //其他控件驗證代碼..
15
16 return true;
17 }
18 -->
19 </script>
在處理不同的頁面時，開發(fā)人員必須在每個頁面都copy這樣的代碼。在上一篇文章中，我已經(jīng)說過這樣的模式不僅要重復(fù)的編寫類似的驗證代碼，代碼段結(jié)構(gòu)差，而且為了實現(xiàn)錯誤提示，必須在每個if段添加上focus和alert代碼。
下面是一段采用JSClientValidator類進行驗證的代碼段，可以看出驗證類的設(shè)計思想
1 <script language="javascript">
2 <!--
3 function ValidateInput()
4 {
5 var validator = new ClientValidator();
6 var bValid = false;
7
8 // 驗證名稱是否為空
9 validator.AddEmpty(document.getElementById("txbName"), null, "名稱不能為空");
10
11 // 驗證備注是否為空，且長度是否合法
12 validator.AddLength(
13 document.getElementById("txbRemark"), null, true, "備注不能為空",
14 10, 300, "備注長度應(yīng)在10－300字內(nèi)"
15 );
16
17 bValid = validator.RunValidate();
18
19 if (bValid == false)
20 {
21 // 提示錯誤信息
22 window.alert(validator.lastErrorMessage);
23 // 定位自出錯控件
24 validator.lastErrorControl.focus();
25 }
26 }
27 -->
28 </script>
通過AddXXX方法，把相應(yīng)類型的驗證項加到驗證隊列中，最后運行RunValidate()進行批量認證，返回控件驗證是否合法。并且由lastErrorControl和lastErrorMessage可以得到出錯的控件和相應(yīng)的錯誤信息。
通過對開發(fā)過程中的javascript驗證代碼進行統(tǒng)計，最常進行的驗證是“xxx輸入值不能為空”，而且其他格式的校驗通常是以“非空”為前提的。因此，JSClientValidator中保持著兩個Array，并且把“不能為空”驗證（簡稱EmptyValidate）作為第一項驗證。
1、控件數(shù)組：保存著所有待驗證的控件
1 // 控件數(shù)組
2 this.Controls = new Array();
3
4
5 /**
6 * 控件類
7 *
8 * @param ctl 控件對象
9 * @param strValue 控件值，為null時由控件對象的value屬性獲取
10 * @param bCheckEmpty 是否進行為空判斷
11 * @param strErrorMessage為空時提示的錯誤信息，bCheckEmpty==false時可為null
12 *
13 * 創(chuàng)建人：陳文凱
14 * 創(chuàng)建日期：2005年9月12日
15 * 修改人：
16 * 修改日期：
17 **/
18 function ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage)
19 {
20 this.Control = ctl;
21 this.Value = (strValue == null ? ctl.value : strValue);
22 this.CheckEmpty = bCheckEmpty;
23 this.Message = strErrorMessage;
24 }
25
26 /**
27 * 添加控件對象
28 *
29 * @param ctl 控件對象
30 * @param strValue 控件輸入值
31 * @param bCheckEmpty 是否執(zhí)行輸入值非空校驗
32 * @param strErrorMessage當(dāng)輸入值為空時的提示信息
33 * @return 控件對象在控件數(shù)組中的下標(biāo)
34 *
35 * 創(chuàng)建人：陳文凱
36 * 創(chuàng)建日期：2005年9月12日
37 * 修改人：
38 * 修改日期：
39 **/
40 function AddControl(ctl, strValue, bCheckEmpty, strErrorMessage)
41 {
42 var index = this.Controls.length;
43 var ctlItem = new ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage);
44 this.Controls[index] = ctlItem;
45
46 return index;
47 }
當(dāng)執(zhí)行驗證時，先遍歷Control數(shù)組，對那些需要進行EmptyValidate驗證的控件進行驗證。若驗證通過，在執(zhí)行其他各種驗證項的驗證。
2、驗證項數(shù)組：保存控件的驗證方式的數(shù)組，下面的代碼演示了可接受的驗證方式。注意，其中還有一種驗證項類型為“自定義驗證項”，可以指定驗證函數(shù)進行驗證。類型驗證項（Type）可接受自定義的正則式為驗證格式。通過這兩種驗證類型＋內(nèi)置的驗證類型（Empty，相等，長度）等，已經(jīng)能夠覆蓋web頁面上常用的驗證方式。
（1）驗證方式：
1 /**
2 * 驗證方式枚舉型定義
3 *
4 **/
5 function ValidateTypeEnum()
6 {
7 // 判斷是否為空
8 this.Empty = "client.empty";
9
10 // 判斷是否相等
11 this.Equal = "client.equal"
12
13 // 判斷長度是否符合要求
14 this.Length = "client.length";
15
16 // 判斷是否符合類型（包括以下定義的數(shù)字－時間）
17 this.Type = "client.Type";
18
19 // 判斷是否為數(shù)字
20 this.Digit = "client.digit";
21
22 // 判斷是否整數(shù)
23 this.Integer = "client.int";
24
25 // 判斷是否正整數(shù)
26 this.Unsigned = "client.uint";
27
28 // 判斷是否email
29 this.Email = "client.email";
30
31 // 判斷是否日期，格式為yyyy-MM-dd
32 this.Date = "client.date";
33
34 // 判斷是否為時間，格式為yyyy-MM-dd hh:mm:ss
35 this.Time = "client.time";
36
37 // 自定義驗證項
38 this.Extend = "client.extend";
39&nb%
