网页中控件智能校验的一种实现方法(原创)

       在Web项目中控件值的校验是不可少的，对于有大量控件的页面，程序员通常要使用Javascript编写大量的脚本进行，有没有一种方式可以减少程序员的这种大量重复编码的方式。最近，在一个项目中尝试了这种方式，大大的减少了前后台的校验代码的编写。

       此技术的实现并不复杂，只是实现了一种检验的思路，希望能给给大家起个抛砖引玉的作用。由于工作原因我使用ASP+JS实现，其实语言只是一种工具，关键是思路。当然，也可以用ASP.NET实现。

        本文是Javascript实现的自动验证函数（原创） 的续篇，那片文章里只实现了前台的校验。

测试页面
test.asp
校验的内容：Text控件
校验方式：单一控件和控件数组
特殊属性的说明：
valuetype="integer"   控件值的类型
 msg=",<%=IMSG0002%>"   错误信息
第一项是必须输入项的提示信息；第二项是类型错误的提示信息，两项都可为空但中间的“，”号不能省略。
mustitem="true"  必须输入项，没有这个属性的控件就认为不是必需输入项

 1 <%
 2    Response.CharSet ="gb2312"
 3 %>
 4 <!--  #include file="message.inc"  -->
 5 <!--  #include file="stringtools.inc"  -->
 6 <!--  #include file="common.inc"  -->
 7 <!--  #include file="validate.inc"  -->
 8 <%
 9
10    Dim strErrMsgID
11    Call validate()
12 %>
13 < HTML >
14 < HEAD >
15 < TITLE >  New Document  </ TITLE >
16      < meta  http-equiv ="content-type"  content ="text/html; charset=gb2312"   />
17      < meta  http-equiv ="pragma"  content ="no-cache" >
18      < meta  http-equiv ="cache-control"  content ="no-cache" >
19      < meta  http-equiv ="expires"  content ="0" >
20 < script  src ="common.js" ></ script >
21 < script  src ="validate.js" ></ script >
22 < script  language ="javascript" >
23<!--
24function a(obj){
25
26    alert(obj.name);
27}
28//-->
29 </ script >
30 </ HEAD >
31
32 < BODY >
33 < FORM  NAME ="frm"  METHOD =POST  ACTION ="" >
34 < font  color ="red" > <% = strErrMsgID %> </ font >
35 < input  type ="hidden"  id ="_page_viewstate"  name ="_page_viewstate"  value ="" >
36 ＩＤ < INPUT  TYPE ="text"  id ="txtInt"  NAME ="txtInt"  maxlength ="6"  valuetype ="integer"  msg =",<%=IMSG0002%>"   >< br >
37 ＩＤ < INPUT  TYPE ="text"  id ="txtInt"  NAME ="txtInt"  maxlength ="6"  valuetype ="integer"  msg =",<%=IMSG0002%>"   >< br >
38 ＩＤ < INPUT  TYPE ="text"  id ="txtInt"  NAME ="txtInt"  maxlength ="6"  valuetype ="integer"  msg =",<%=IMSG0002%>"   >< br >
39 ＩＤ < INPUT  TYPE ="text"  id ="txtInt"  NAME ="txtInt"  maxlength ="6"  valuetype ="integer"  msg =",<%=IMSG0002%>"   >< br >
40
41 名称 < INPUT  TYPE ="text"  id ="txtString"  NAME ="txtString"  maxlength ="5"  valuetype ="string"  msg ="<%=IMSG0003%>,<%=IMSG0004%>"  mustitem ="true" >< br >
42 名称 < INPUT  TYPE ="text"  id ="txtDate"  NAME ="txtDate"  maxlength ="10"  valuetype ="date"  msg ="<%=IMSG0003%>,werwe"  mustitem ="true" >< br >
43 < INPUT  TYPE ="button"  value ="submit"  onclick ="validate(frm); return false;" >
44
45 < SCRIPT  LANGUAGE ="JavaScript" >
46<!--
47//validate()
48//-->
49 </ SCRIPT >
50 </ FORM >
51 </ BODY >
52 </ HTML >
53

后台检验validate.asp
将前台传来的_page_viewstate参数通过分解得到，页面的校验信息
ValueSeparator  页面控件信息分割符
ItemSeparator   每个可能的参数分割符

 1 < %
 2 ' -------------------------------------------------------------------
 3 ' * 函数名                :    validate
 4 ' * 完成日                :    2007/04/04
 5 ' * 更新日                :    2007/04/04
 6 ' * 作者                    :    向东   meil75#hotmail.com
 7 ' * 参数                    :    
 8 ' * 機能説明              :    前台参数的后台校验
 9 ' -------------------------------------------------------------------
10 Function  validate()
11
12      Const  ValueSeparator  = " <<__>> "
13      Const  ItemSeparator  = " <<==>> "
14
15      Dim  strViewstate
16      Dim  arrayViewstate
17      Dim  arrayItem
18      Dim  i
19      Dim  intAVLen
20      Dim  strValue, strMaxlength, strValuetype, strMsg, strMustitem
21
22     validate  =   True
23
24     strViewstate  =  Request( " _page_viewstate " )
25
26
27      If  strViewstate  <>   ""   Then
28
29         arrayViewstate  =   split (strViewstate, ValueSeparator)
30         intAVLen  =   UBound (arrayViewstate)
31
32          For  i  =   0   To  intAVLen
33
34             arrayItem  =   split (arrayViewstate(i), ItemSeparator)
35
36              If   UBound (arrayItem)  =   6   Then
37
38                 strValue  =   Trim (arrayItem( 1 ))
39                 strMaxlength  =  arrayItem( 2 )
40                 strValuetype  =   LCase (arrayItem( 3 ))
41                 strMustitem  =   LCase (arrayItem( 5 ))
42
43                 strMsg  =   split (arrayItem( 4 ),  " , " )
44
45                  '是否是必须输入项
46                  If  strMustitem  =   " true "   And  strValue  =   ""   Then
47                      If  ( Instr (strErrMsgID,  strMsg( 0 ))  < 1 )  Then
48                         strErrMsgID  =  strErrMsgID  +  strMsg( 0 )  &   " <br> "
49                      End   If
50                     validate  =   False
51                  End   If
52
53                  '数值验证
54                  If  strValue  <>   ""   And  strValuetype  =   " integer "   And  ( Not  CheckNum(strValue)  Or   Len (strValue)  >  strMaxlength) Then
55                      If  ( Instr (strErrMsgID,  strMsg( 1 ))  < 1 )  Then
56                         strErrMsgID  =  strErrMsgID  +  strMsg( 1 )  &   " <br> "
57                      End   If
58                     validate  =   False
59                  End   If
60
61                  '文字校验
62                  If  strValue  <>   ""   And  strValuetype  =   " string "   And  StrLenB(strValue)  >   CInt (strMaxlength)  Then
63                      If  ( Instr (strErrMsgID,  strMsg( 1 ))  < 1 )  Then
64                         strErrMsgID  =  strErrMsgID  +  strMsg( 1 )  &   " <br> "
65                      End   If
66                     validate  =   False
67                  End   If
68
69                  '日期校验
70                  If  strValue  <>   ""   And  strValuetype  =   " date "   And  isDateValue(strValue)  =   False   Then
71                      If  ( Instr (strErrMsgID,  strMsg( 1 ))  < 1 )  Then
72                         strErrMsgID  =  strErrMsgID  +  strMsg( 1 )  &   " <br> "
73                      End   If
74                     validate  =   False
75                  End   If
76
77                  ' Response.Write(strValue & "____" & strMaxlength & "____" & strValuetype & _
78                  ' "____" & strMsg(0) & "____" & strMsg(1) & "____" & strMustitem & "<BR>")
79
80              End   If
81          Next
82
83      End   If
84
85 End Function
86 % >

前台JavaScript校验 validate.js
实现单一控件和控件数组的校验
将控件值和校验属性通过_page_viewstate 参数传递到后台，有点类似ASP.NET里的viewstate。不过这回你可以自己决定它的内容和封装形式了。这可能是也是程序员在编程中最大的诉求了，自己掌握了程序的控制权，使程序的编写更加灵活。
ValueSeparator  页面控件信息分割符
ItemSeparator   每个可能的参数分割符

  1 /**/ /******************************************************
  2* 函数名                :    validate
  3* 制作日                :    2007/04/05
  4* 更新日                :    2007/04/05
  5* 作者                    :    向东   meil75#hotmail.com
  6* 引数                     :    
  7* 機能説明              :     Text控件校验
  8******************************************************/
  9 var  controlArrayName;
 10 var  ValueSeparator  = " <<__>> " ;
 11 var  ItemSeparator  = " <<==>> " ;
 12 function  validate() {
 13
 14    var Elements;
 15    var i;
 16    var elLen
 17    var msgs;
 18    controlArrayName = "";
 19
 20    document.getElementById("_page_viewstate").value = "";
 21
 22    //var objs = document.all;
 23    //var Elements = document.getElementsByTagName("*");
 24    Elements = document.getElementsByTagName("input");
 25    arrName ="";
 26
 27    for ( i in Elements ) {
 28    elLen = Elements[i].length;
 29
 30        if (elLen > 1) {
 31
 32            //数组控件的校验
 33            if (checkArrayValue(Elements[i]) == false) {
 34                return false;
 35            }
 36
 37        }else{
 38
 39            //控件校验
 40            if (checkValue(Elements[i]) == false) {
 41                return false;
 42            }
 43        }
 44    }
 45
 46    //var _frmObj = document.forms;
 47    //_frmObj[0].submit();
 48
 49    return true;
 50}
 51
 52 /**/ /******************************************************
 53* 函数名                :    checkArrayValue
 54* 完成日                :    2007/04/05
 55* 更新日                :    2007/04/05
 56* 作者                    :    向东   meil75#hotmail.com
 57* 引数                  :    控件数组
 58* 機能説明              :    数组控件的校验
 59******************************************************/
 60 function  checkArrayValue( obj ) {
 61
 62    var ctlArray;
 63    var j;
 64    var arrLen;
 65
 66    ctlArray = obj;
 67    arrLen = ctlArray.length;
 68
 69    if (controlArrayName != ctlArray[0].name.toLowerCase()) {
 70        controlArrayName = ctlArray[0].name.toLowerCase();
 71
 72        for (j=0; j < arrLen; j++) {
 73
 74            //数组控件的校验
 75            if (checkValue(ctlArray[j]) == false) {
 76                return false;
 77            } 
 78        }
 79    }
 80
 81    return true;
 82}
 83
 84 /**/ /******************************************************
 85* 函数名                :    checkValue
 86* 完成日                :    2007/04/05
 87* 更新日                :    2007/04/05
 88* 作者                    :    向东   meil75#hotmail.com
 89* 引数                    :    控件
 90* 機能説明              :   控件的校验
 91******************************************************/
 92 function  checkValue ( obj ) {
 93
 94    var len;
 95    len = obj.maxLength;
 96
 97    if ( obj.type == "text" ) {
 98
 99        //if (obj.msg != undefined ) {
100        if ( obj.msg ) {
101            msgs = obj.msg.split(",");
102        } else {
103            return true;
104        }
105
106        if ( trim(obj.value) == "") {
107
108            //是否是必须输入项
109            if ( obj.mustitem && obj.mustitem.toLowerCase() == "true") {
110
111                alert(msgs[0]);
112                getFocusSelect(obj);
113                return false;
114            }
115
116        }else {
117
118            //数字校验
119            if ( obj.valuetype && obj.valuetype.toLowerCase() == "integer" ) {
120
121                if ( checkNumLen(trim(obj.value), len) == false ) {
122                    alert(msgs[1]);
123                    getFocusSelect(obj);
124                    return false;
125                }
126
127            //文字校验
128            } else if ( obj.valuetype && obj.valuetype.toLowerCase() == "string" ) {
129
130                if ( getLenthByByte(trim(obj.value)) > len){
131                    alert(msgs[1]);
132                    getFocusSelect(obj);
133                    return false;
134                }
135
136            //日期校验
137            } else if ( obj.valuetype && obj.valuetype.toLowerCase() == "date" ) {
138
139                if ( isDate(trim(obj.value)) == false){
140                    alert(msgs[1]);
141                    getFocusSelect(obj);
142                    return false;
143                }
144            }
145        }
146
147        //控件信息的保存
148        var pvObj = document.getElementById("_page_viewstate");
149        pvObj.value = pvObj.value + ValueSeparator + getCtlInfo(obj);
150        //alert(pvObj.value);
151    }
152
153    return true;
154}
155
156 /**/ /******************************************************
157* 関数名                :    getCtlInfo
158* 作成日                :    2007/04/05
159* 更新日                :    2007/04/05
160* 作成者                :    向东   meil75#hotmail.com
161* 引数                  :    控件
162* 機能説明              :    控件信息获得
163******************************************************/
164 function  getCtlInfo(obj)  {
165
166    var strValue;
167    var objMsg;
168    var objMustitem;
169
170    strValue = obj.name + ItemSeparator + obj.value + ItemSeparator +
171                  obj.maxLength + ItemSeparator + obj.valuetype +ItemSeparator;
172
173    if ( obj.msg ) {
174        strValue = strValue + obj.msg;
175    }
176    strValue = strValue + ItemSeparator;
177
178    if ( obj.mustitem) {
179        strValue = strValue + obj.mustitem;
180    }
181    strValue = strValue + ItemSeparator;
182
183    return strValue;
184}

       本人是第一次作ASP的项目，对ASP也不是很精通，难免有不足之处。希望，各位能给予指正。

       下一步，我想用ASP。NET来实现不知道有没有时间了。总觉得。NET的脚本库太庞大了，比较笨重。在项目中使用不便，而且不够灵活。

http