在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<!--
24
function 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
<%
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 strErrMsgID11
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
<!--24
function 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'-------------------------------------------------------------------
10Function 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
85End Function
86%>
<%2
'-------------------------------------------------------------------3
'* 函数名 : validate4
'* 完成日 : 2007/04/045
'* 更新日 : 2007/04/046
'* 作者 : 向东 meil75#hotmail.com7
'* 参数 : 8
'* 機能説明 : 前台参数的后台校验9
'-------------------------------------------------------------------10
Function validate()11
12
Const ValueSeparator ="<<__>>"13
Const ItemSeparator ="<<==>>"14
15
Dim strViewstate16
Dim arrayViewstate17
Dim arrayItem18
Dim i19
Dim intAVLen20
Dim strValue, strMaxlength, strValuetype, strMsg, strMustitem21
22
validate = True23
24
strViewstate = Request("_page_viewstate")25
26
27
If strViewstate <> "" Then28
29
arrayViewstate = split(strViewstate, ValueSeparator)30
intAVLen = UBound(arrayViewstate)31
32
For i = 0 To intAVLen33
34
arrayItem = split(arrayViewstate(i), ItemSeparator)35
36
If UBound(arrayItem) = 6 Then37
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 = "" Then47
If (Instr(strErrMsgID, strMsg(0)) <1) Then48
strErrMsgID = strErrMsgID + strMsg(0) & "<br>"49
End If50
validate = False51
End If52
53
'数值验证54
If strValue <> "" And strValuetype = "integer" And (Not CheckNum(strValue) Or Len(strValue) > strMaxlength)Then55
If (Instr(strErrMsgID, strMsg(1)) <1) Then56
strErrMsgID = strErrMsgID + strMsg(1) & "<br>"57
End If58
validate = False59
End If60
61
'文字校验62
If strValue <> "" And strValuetype = "string" And StrLenB(strValue) > CInt(strMaxlength) Then63
If (Instr(strErrMsgID, strMsg(1)) <1) Then64
strErrMsgID = strErrMsgID + strMsg(1) & "<br>"65
End If66
validate = False67
End If68
69
'日期校验70
If strValue <> "" And strValuetype = "date" And isDateValue(strValue) = False Then71
If (Instr(strErrMsgID, strMsg(1)) <1) Then72
strErrMsgID = strErrMsgID + strMsg(1) & "<br>"73
End If74
validate = False75
End If76
77
'Response.Write(strValue & "____" & strMaxlength & "____" & strValuetype & _78
'"____" & strMsg(0) & "____" & strMsg(1) & "____" & strMustitem & "<BR>")79
80
End If81
Next82
83
End If84
85
End Function86
%>
前台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******************************************************/
9var controlArrayName;
10var ValueSeparator ="<<__>>";
11var ItemSeparator ="<<==>>";
12function 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******************************************************/
60function 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******************************************************/
92function 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******************************************************/
164function 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}
/******************************************************2
* 函数名 : validate3
* 制作日 : 2007/04/054
* 更新日 : 2007/04/055
* 作者 : 向东 meil75#hotmail.com6
* 引数 : 7
* 機能説明 : Text控件校验8
******************************************************/9
var controlArrayName;10
var ValueSeparator ="<<__>>";11
var ItemSeparator ="<<==>>";12
function validate(){13
14
var Elements;15
var i;16
var elLen17
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
* 函数名 : checkArrayValue54
* 完成日 : 2007/04/0555
* 更新日 : 2007/04/0556
* 作者 : 向东 meil75#hotmail.com57
* 引数 : 控件数组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
* 函数名 : checkValue86
* 完成日 : 2007/04/0587
* 更新日 : 2007/04/0588
* 作者 : 向东 meil75#hotmail.com89
* 引数 : 控件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
* 関数名 : getCtlInfo158
* 作成日 : 2007/04/05159
* 更新日 : 2007/04/05160
* 作成者 : 向东 meil75#hotmail.com161
* 引数 : 控件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