这次成型的验证类还算比较满意了。只要把form的id传进去，然后添加验证事件，最后format一下就OK了，也不用再另外手动添加什么代码了。直接把html代码弄过来好了。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<title>Untitled 1</title>
7
<style type="text/css">
8
.validator {
9
font-family: "Courier New";
10 font-size: 12px;
11 color: #FF0000;
12 padding-left: 4px;
13
}
14.validator img {
15 vertical-align: middle;
16 width: 12px;
17 height: 12px;
18
}
19</style>
20<script language="javascript" type="text/javascript">
21 function $(id){return document.getElementById(id)};
22 var isIE=(navigator.appName.indexOf("Microsoft")!=-1 && !window.opera)?true:false;
23
24 function Validator(formid){
25 var _base=this;
26 var form=$(formid);
27 var _validControlTag="__v";
28 var _validControlClass="validator";
29 var _validMsgTag="<img src=\"Images/Warning.gif\" alt=\"警告信息\"> ";
30
31 form.onsubmit=validForm;
32
33 var _ControlArr=new Array();
34
35 //验证所有的控件
36 function validForm(){
37 var pass=true;
38 for(var i=0;i<_ControlArr.length;i++){
39 if(!doValid(i)) pass=false;
40 }
41 return pass
42 }
43
44 function showArr(){
45 for(var i=0;i<_ControlArr.length;i++){
46 document.write(_ControlArr[i][0] + ":<br/>");
47 for(var j=0;j<_ControlArr[i][1].length;j++){
48 document.write(_ControlArr[i][1][j] + "<br/>");
49 }
50 }
51 }
52
53 //添加验证事件
54 this.addValid=function(id,type,msg){
55 var validId; //用来验证的控件
56 var helpId; //用来辅助的控件
57 if(typeof(id)=="object"){
58 validId=id[0];
59 helpId=new Array();
60 for(var i=1;i<id.length;i++){
61 helpId.push(id[i]);
62 }
63 }else{
64 validId=id;
65 helpId="";
66 }
67 //添加进数组
68 var index=findIndex(validId);
69 if(index!=-1){
70 _ControlArr[index][1].push(new Array(helpId,type,msg));
71 }else{
72 _ControlArr.push(new Array(validId,new Array(new Array(helpId,type,msg))));
73 }
74 //绑定验证事件
75 //bindValid(validId,helpId,type,msg);
76 }
77
78 //给各个控件绑定验证事件
79 this.format=function(){
80 //showArr();
81 for(var i=0;i<_ControlArr.length;i++){
82 bindValid(i);
83 }
84 }
85
86 //查找id对应的数组位置
87 function findIndex(id){
88 for(var i=0;i<_ControlArr.length;i++){
89 if(_ControlArr[i][0]==id)return i;
90 }
91 return -1;//没有找到的话返回-1
92 }
93
94 //绑定验证事件
95 function bindValid(index){
96 var pass=true;
97
98 addEmptyTag(index);
99
100 var validId=_ControlArr[index][0];
101 var ctlId=_validControlTag + validId;
102 var ctl=document.createElement("span");
103 ctl.id=ctlId;
104 ctl.className=_validControlClass;
105 var obj=$(validId);
106 obj.parentNode.appendChild(ctl);
107
108 if(isIE){
109 obj.attachEvent("onblur",function(){
110 if(!doValid(index)) pass=false;
111 });
112 }else{
113 obj.addEventListener("blur",function(){
114 if(!doValid(index)) pass=false;
115 },false);
116 }
117 return pass;
118 }
119
120 //添加不允许为空的标志
121 function addEmptyTag(index){
122 for(var i=0;i<_ControlArr[index][1].length;i++){
123 if(_ControlArr[index][1][i][1]=="empty")break;
124 }
125 if(i<_ControlArr[index][1].length){
126 var tag=document.createElement("tag");
127 tag.appendChild(document.createTextNode("*"));
128 tag["style"]["color"]="#FF0000";
129 $(_ControlArr[index][0]).parentNode.appendChild(tag);
130 }
131 }
132
133 //作出实际的验证部分
134 function doValid(index){
135 var pass=true;
136 var obj=$(_ControlArr[index][0]);
137 var ctl=$(_validControlTag + _ControlArr[index][0]);
138 for(var i=0;i<_ControlArr[index][1].length;i++){
139 var helpId=_ControlArr[index][1][i][0];
140 var msg=_ControlArr[index][1][i][2];
141 switch(_ControlArr[index][1][i][1]){
142 case "empty":
143 if(onBlur(obj.value=="",ctl,msg)) pass=false;
144 break;
145 case "equal":
146 var help=$(helpId[0]);
147 if(onBlur(obj.value!=help.value,ctl,msg)) pass=false;
148 break;
149 case "email":
150 if(obj.value!="" && onBlur(!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(obj.value),ctl,msg)) pass=false;
151 break;
152 }
153 }
154 return pass;
155 }
156
157 //鼠标离开控件时作出的反应
158 function onBlur(bool,ctl,msg){
159 var html=ctl.innerHTML;
160 if(bool){
161 if(!html)
162 ctl.innerHTML=_validMsgTag + msg;
163 else if(html.indexOf(msg)==-1){
164 ctl.innerHTML+=" " + msg;
165 }
166 }else{
167 if(html && html.indexOf(msg)!=-1)
168 ctl.innerHTML="";
169 }
170 return bool;
171 }
172
173 }
174
175 window.onload=function(){
176 var vld=new Validator("formLogin");
177 vld.addValid("txtName","empty","用户名不能为空");
178 vld.addValid("txtPassword","empty","密码不能为空");
179 vld.addValid("txtRePassword","empty","确认密码不能为空");
180 vld.addValid(["txtRePassword","txtPassword"],"equal","两次输入的密码不一致");
181 vld.addValid("txtEmail","empty","Email不能为空");
182 vld.addValid("txtEmail","email","Email格式不对");
183 vld.format();
184 }
185</script>
186</head>
187
188<body>
189
190<form method="post" action="?action=login" id="formLogin">
191 <div>用户名：<input type="text" id="txtName" size="10" /></div>
192 <div>密码：<input type="password" id="txtPassword" size="10"/></div>
193 <div>确认密码：<input type="password" id="txtRePassword" size="10" /></div>
194 <div>Email：<input type="text" id="txtEmail" size="20" /></div>
195
196 <input type="submit" value="Submit" />
197</form>
198
199</body>
200
201</html>
202
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
4
<head>5
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6
<title>Untitled 1</title>7
<style type="text/css">
8
.validator {
.validator 9
font-family: "Courier New";10
font-size: 12px;11
color: #FF0000;12
padding-left: 4px;13
}14
.validator img {15
vertical-align: middle;16
width: 12px;17
height: 12px;18
}19
</style>20
<script language="javascript" type="text/javascript">21
function $(id){return document.getElementById(id)};22
var isIE=(navigator.appName.indexOf("Microsoft")!=-1 && !window.opera)?true:false;23
24
function Validator(formid){25
var _base=this;26
var form=$(formid);27
var _validControlTag="__v";28
var _validControlClass="validator";29
var _validMsgTag="<img src=\"Images/Warning.gif\" alt=\"警告信息\"> ";30
31
form.onsubmit=validForm;32
33
var _ControlArr=new Array();34
35
//验证所有的控件36
function validForm(){37
var pass=true;38
for(var i=0;i<_ControlArr.length;i++){39
if(!doValid(i)) pass=false;40
}41
return pass42
}43
44
function showArr(){45
for(var i=0;i<_ControlArr.length;i++){46
document.write(_ControlArr[i][0] + ":<br/>");47
for(var j=0;j<_ControlArr[i][1].length;j++){48
document.write(_ControlArr[i][1][j] + "<br/>");49
}50
}51
}52
53
//添加验证事件54
this.addValid=function(id,type,msg){55
var validId; //用来验证的控件56
var helpId; //用来辅助的控件57
if(typeof(id)=="object"){58
validId=id[0];59
helpId=new Array();60
for(var i=1;i<id.length;i++){61
helpId.push(id[i]);62
}63
}else{64
validId=id;65
helpId="";66
}67
//添加进数组68
var index=findIndex(validId);69
if(index!=-1){70
_ControlArr[index][1].push(new Array(helpId,type,msg));71
}else{72
_ControlArr.push(new Array(validId,new Array(new Array(helpId,type,msg))));73
}74
//绑定验证事件75
//bindValid(validId,helpId,type,msg);76
}77
78
//给各个控件绑定验证事件79
this.format=function(){80
//showArr();81
for(var i=0;i<_ControlArr.length;i++){82
bindValid(i);83
}84
}85
86
//查找id对应的数组位置87
function findIndex(id){88
for(var i=0;i<_ControlArr.length;i++){89
if(_ControlArr[i][0]==id)return i;90
}91
return -1;//没有找到的话返回-192
}93
94
//绑定验证事件95
function bindValid(index){96
var pass=true;97
98
addEmptyTag(index);99
100
var validId=_ControlArr[index][0];101
var ctlId=_validControlTag + validId;102
var ctl=document.createElement("span");103
ctl.id=ctlId;104
ctl.className=_validControlClass;105
var obj=$(validId);106
obj.parentNode.appendChild(ctl);107
108
if(isIE){109
obj.attachEvent("onblur",function(){110
if(!doValid(index)) pass=false;111
});112
}else{113
obj.addEventListener("blur",function(){114
if(!doValid(index)) pass=false;115
},false);116
}117
return pass;118
}119
120
//添加不允许为空的标志121
function addEmptyTag(index){122
for(var i=0;i<_ControlArr[index][1].length;i++){123
if(_ControlArr[index][1][i][1]=="empty")break; 124
}125
if(i<_ControlArr[index][1].length){126
var tag=document.createElement("tag");127
tag.appendChild(document.createTextNode("*"));128
tag["style"]["color"]="#FF0000";129
$(_ControlArr[index][0]).parentNode.appendChild(tag);130
}131
}132
133
//作出实际的验证部分134
function doValid(index){135
var pass=true;136
var obj=$(_ControlArr[index][0]);137
var ctl=$(_validControlTag + _ControlArr[index][0]);138
for(var i=0;i<_ControlArr[index][1].length;i++){139
var helpId=_ControlArr[index][1][i][0];140
var msg=_ControlArr[index][1][i][2];141
switch(_ControlArr[index][1][i][1]){142
case "empty":143
if(onBlur(obj.value=="",ctl,msg)) pass=false;144
break;145
case "equal":146
var help=$(helpId[0]);147
if(onBlur(obj.value!=help.value,ctl,msg)) pass=false;148
break;149
case "email":150
if(obj.value!="" && onBlur(!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(obj.value),ctl,msg)) pass=false;151
break;152
}153
}154
return pass;155
}156
157
//鼠标离开控件时作出的反应158
function onBlur(bool,ctl,msg){159
var html=ctl.innerHTML;160
if(bool){161
if(!html)162
ctl.innerHTML=_validMsgTag + msg;163
else if(html.indexOf(msg)==-1){164
ctl.innerHTML+=" " + msg;165
}166
}else{167
if(html && html.indexOf(msg)!=-1)168
ctl.innerHTML=""; 169
}170
return bool;171
}172
173
}174
175
window.onload=function(){176
var vld=new Validator("formLogin");177
vld.addValid("txtName","empty","用户名不能为空");178
vld.addValid("txtPassword","empty","密码不能为空");179
vld.addValid("txtRePassword","empty","确认密码不能为空");180
vld.addValid(["txtRePassword","txtPassword"],"equal","两次输入的密码不一致");181
vld.addValid("txtEmail","empty","Email不能为空");182
vld.addValid("txtEmail","email","Email格式不对");183
vld.format();184
}185
</script>186
</head>187
188
<body>189
190
<form method="post" action="?action=login" id="formLogin">191
<div>用户名：<input type="text" id="txtName" size="10" /></div>192
<div>密码：<input type="password" id="txtPassword" size="10"/></div>193
<div>确认密码：<input type="password" id="txtRePassword" size="10" /></div>194
<div>Email：<input type="text" id="txtEmail" size="20" /></div>195
196
<input type="submit" value="Submit" />197
</form>198
199
</body>200
201
</html>202
浙公网安备 33010602011771号