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

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

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

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

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

<%
2

Response.CharSet ="gb2312"
3

%>
4

5

6

7

8

<%
9

Dim strErrMsgID
11

Call validate()
12

%>
13

<HTML>
14

<HEAD>
15

<TITLE> New Document </TITLE>
16

<!--
24

function a(obj){
25

alert(obj.name);
27

}
28

//-->
29

</script>
30

</HEAD>
31

<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

名称<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

<SCRIPT LANGUAGE="JavaScript">
46

<!--
47

//validate()
48

//-->
49

</SCRIPT>
50

</FORM>
51

</BODY>
52

</HTML>
53

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

<%
2

'-------------------------------------------------------------------
3

'* 函数名 : validate
4

'* 完成日 : 2007/04/04
5

'* 更新日 : 2007/04/04
6

'* 作者 : 向东 meil75#hotmail.com
7

'* 参数 :
8

'* 機能説明 : 前台参数的后台校验
9

'-------------------------------------------------------------------
10

Function validate()
11

Const ValueSeparator ="<<__>>"
13

Const ItemSeparator ="<<==>>"
14

Dim strViewstate
16

Dim arrayViewstate
17

Dim arrayItem
18

Dim i
19

Dim intAVLen
20

Dim strValue, strMaxlength, strValuetype, strMsg, strMustitem
21

validate = True
23

strViewstate = Request("_page_viewstate")
25

If strViewstate <> "" Then
28

arrayViewstate = split(strViewstate, ValueSeparator)
30

intAVLen = UBound(arrayViewstate)
31

For i = 0 To intAVLen
33

arrayItem = split(arrayViewstate(i), ItemSeparator)
35

If UBound(arrayItem) = 6 Then
37

strValue = Trim(arrayItem(1))
39

strMaxlength = arrayItem(2)
40

strValuetype = LCase(arrayItem(3))
41

strMustitem = LCase(arrayItem(5))
42

strMsg = split(arrayItem(4), ",")
44

'是否是必须输入项
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

'数值验证
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

'文字校验
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

'日期校验
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

'Response.Write(strValue & "____" & strMaxlength & "____" & strValuetype & _
78

'"____" & strMsg(0) & "____" & strMsg(1) & "____" & strMustitem & "<BR>")
79

End If
81

Next
82

End If
84

End Function
86

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

/******************************************************
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

var Elements;
15

var i;
16

var elLen
17

var msgs;
18

controlArrayName = "";
19

document.getElementById("_page_viewstate").value = "";
21

//var objs = document.all;
23

//var Elements = document.getElementsByTagName("*");
24

Elements = document.getElementsByTagName("input");
25

arrName ="";
26

for ( i in Elements ) {
28

elLen = Elements[i].length;
29

if (elLen > 1) {
31

//数组控件的校验
33

if (checkArrayValue(Elements[i]) == false) {
34

return false;
35

}
36

}else{
38

//控件校验
40

if (checkValue(Elements[i]) == false) {
41

return false;
42

}
43

}
44

}
45

//var _frmObj = document.forms;
47

//_frmObj[0].submit();
48

return true;
50

}
51

/******************************************************
53

* 函数名 : checkArrayValue
54

* 完成日 : 2007/04/05
55

* 更新日 : 2007/04/05
56

* 作者 : 向东 meil75#hotmail.com
57

* 引数 : 控件数组
58

* 機能説明 : 数组控件的校验
59

******************************************************/
60

function checkArrayValue( obj ){
61

var ctlArray;
63

var j;
64

var arrLen;
65

ctlArray = obj;
67

arrLen = ctlArray.length;
68

if (controlArrayName != ctlArray[0].name.toLowerCase()) {
70

controlArrayName = ctlArray[0].name.toLowerCase();
71

for (j=0; j < arrLen; j++) {
73

//数组控件的校验
75

if (checkValue(ctlArray[j]) == false) {
76

return false;
77

}
78

}
79

}
80

return true;
82

}
83

/******************************************************
85

* 函数名 : checkValue
86

* 完成日 : 2007/04/05
87

* 更新日 : 2007/04/05
88

* 作者 : 向东 meil75#hotmail.com
89

* 引数 : 控件
90

* 機能説明 : 控件的校验
91

******************************************************/
92

function checkValue ( obj ){
93

var len;
95

len = obj.maxLength;
96

if ( obj.type == "text" ) {
98

//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

posted @ 2007-04-09 19:02 meil 阅读(3855) 评论(14) 编辑收藏举报

刷新页面返回顶部

向东博客

非澹泊无以明志,非宁静无以致远.

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

公告