校验思路，通过事件绑定获取校验标签中的属性值，进行判断是否符合我们书写的正则表达式的规则的正确值，校验标签的后面标签则进行对判断结果的表达。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<html>
	<head>
		<title>js校验form表单</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 500px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: white;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//常见验证码
				function createCode(){
					//创建随机四位数字
					var code=Math.floor(Math.random()*9000+1000);
					//获取元素对象
					var span=document.getElementById("codeSpan");
					//将数字存放到span中
					span.innerHTML=code;					
				}
			//验证用户名
				function checkUname(){
					//获取用户的用户名信息
						var uname=document.getElementById("uname").value;
					//创建校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/
					//获取span对象
						var span=document.getElementById("unameSpan");
					//开始校验
						if(uname=="" || uname==null){
							//输出校验结果
							span.innerHTML="用户名不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(uname)){
							//输出校验结果
							span.innerHTML="用户名ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="用户名不符合规则";
							span.style.color="red";
							return false;
						}
					
				}
			//验证密码
				function checkPwd(){
					//获取用户的密码信息
						var pwd=document.getElementById("pwd").value;
					//创建校验规则
						var reg=/^[a-z]\w{5,7}$/;
					//获取span对象
						var span=document.getElementById("pwdSpan");
					//开始校验
						if(pwd=="" ||pwd==null){
							//输出校验结果
							span.innerHTML="*密码不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(pwd)){
							//输出校验结果
							span.innerHTML="*密码ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="*密码格式不正确";
							span.style.color="red";
							return false;
						}
					checkPwd2();
				}
			//校验确认密码
				function checkPwd2(){
					//获取第一次密码
					var pwd=document.getElementById("pwd").value;
					//获取确认密码
					var pwd2=document.getElementById("pwd2").value;
					//获取span对象
					var span=document.getElementById("pwd2Span");
					//比较两次密码是否相同
					if(pwd2==""||pwd2==null){
						span.innerHTML="确认密码不能为空";
						span.style.color="red";
						return false;
					}else if(pwd==pwd2){
						span.innerHTML="确认密码ok";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="两次密码不一致";
						span.style.color="red";
						return false;
					}
				}
			//校验手机号
				function checkPhone(){
					return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
				}
			//校验邮箱
				function checkMail(){
					return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
					
					
				}
			//校验籍贯
				function checkAddress(){
					//获取用户选择的数据
					var sel=document.getElementById("address").value;
					//获取span
					var span=document.getElementById("addressSpan");
					//校验
					if(sel!=0){
						span.innerHTML="籍贯选择成功";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="籍贯不能为请选择";
						span.style.color="red";
						return false;
					}
					
					
				}
			//校验爱好
				function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
			//检验验证码
				function checkCode() {
					var input = document.getElementById("code");
					var span = document.getElementById("codeSpan");
					if (input.value==span.innerText){
						span.style.backgroundImage="";
						span.innerHTML="验证成功";
						span.style.color="green";
						return true;
					}else {
						span.innerHTML="验证失败";
						span.style.color="red";
						return false;
					}
				}
			function check() {
				var span = document.getElementById("codeSpan");
				alert(span.innerText);
			}
			//校验是否同意公司协议
				function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
				}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
				}
/*-------------------------------------------------------------------------------------------------*/
			//封装校验:相同的保留，不同的传参。
			function checkField(id,reg){
				//获取用户数据
					var inp=document.getElementById(id);
					var va=inp.value;
				 	var alt=inp.alt;
				//创建校验规则
				//获取span对象
					var span=document.getElementById(id+"Span")
				//开始校验
					if(va=="" ||va==null){
						//输出校验结果
						span.innerHTML=alt+"不能为空";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						//输出校验结果
							span.innerHTML=alt+"ok";
							span.style.color="green";
							return true;
					}else{
						//输出校验结果
							span.innerHTML=alt+"不符合规则";
							span.style.color="red";
							return false;
					}
			}
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:</td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan"></span>
						
				</tr>
				<tr>
					<td>性别</td>
					<td>
						男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
						女 <input type="radio" name="sex" id="sex" value="1" />
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
						<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
						
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;" onblur="checkCode()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>

b.jpg

code.jpg.gif