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 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 .success
8 {
9 color:green;
10 }
11 .fail
12 {
13 color:red;
14 }
15 </style>
16 <script>
17 function checkField(reg,objId)
18 {
19 var obj = document.getElementById(objId);
20 var objSpan = document.getElementById(objId+"Span");
21 if(reg.test(obj.value))
22 {
23 objSpan.innerHTML=obj.getAttribute("alt")+"OK";
24 objSpan.className="success";
25 return true;
26 }
27 else
28 {
29 objSpan.innerHTML=obj.getAttribute("alt")+"不符合规则";
30 objSpan.className="fail";
31 return false;
32 }
33 }
34 function checkUname()
35 {
36 var reg = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9_]{2,7}$");
37 return checkField(reg,"uname");
38 }
39 function checkRealName()
40 {
41 var reg = /^[\u4E00-\u9FA5]{2,8}$/ig;
42 return checkField(reg,"realName");
43 }
44 function checkEmail()
45 {
46 var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
47 return checkField(reg,"email");
48 }
49 function checkPhone()
50 {
51 var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
52 return checkField(reg,"phone");
53 }
54 function checkAge()
55 {
56 var reg = /^([0-9]|[0-9]{2}|100)$/;
57 return checkField(reg,"age");
58 }
59 function checkPwd()
60 {
61 pwd1 = document.getElementById("pwd1");
62 pwd2 = document.getElementById("pwd2");
63 var objSpan = document.getElementById("pwdSpan");
64 if(pwd1.value == pwd1.value && pwd1.value != "" && pwd2.value != "")
65 {
66 objSpan.innerHTML=pwd2.alt+"OK";
67 objSpan.className="success";
68 return true;
69 }
70 else
71 {
72 objSpan.innerHTML=pwd2.alt+"不符合规则";
73 objSpan.className="fail";
74 return false;
75 }
76 }
77 var code;
78 function createRandom()
79 {
80 var yzmSpan = document.getElementById("yzmSpan");
81 yzmSpan.innerHTML = code = parseInt(Math.random()*9000+1000);
82 }
83 function checkFav()
84 {
85 var favs = document.getElementsByName("hobby");
86 var favSpan = document.getElementById("favSpan");
87 var count = 0;
88 for(var i = 0; i < favs.length; i++)
89 {
90 if(favs[i].checked)
91 {
92 count++;
93 }
94 }
95 if(count > 1)
96 {
97 favSpan.innerHTML = "爱好OK";
98 favSpan.className = "success";
99 return true;
100 }
101 else
102 {
103 favSpan.innerHTML = "至少选择两项";
104 favSpan.className = "fail";
105 return false;
106 }
107 }
108 function checkIntroduce()
109 {
110 var reg = /^\w{20,140}$/ig;
111 return checkField(reg,"introduce");
112 }
113 function checkCode()
114 {
115 var yzm = document.getElementById("yzm").value;
116 var yzmSpan2 = document.getElementById("yzmSpan2");
117 if(code == yzm)
118 {
119 yzmSpan2.innerHTML = "验证码OK";
120 yzmSpan2.className = "success";
121 return true;
122 }
123 else
124 {
125 yzmSpan2.innerHTML = "验证码不正确";
126 yzmSpan2.className = "fail";
127 return false;
128 }
129 }
130 function checkAddress()
131 {
132 var addr = document.getElementById("class");
133 var addrSpan = document.getElementById("classSpan");
134 if(!(addr.value == "--请选择--"))
135 {
136 addrSpan.innerHTML = "籍贯OK";
137 addrSpan.className = "success";
138 return true;
139 }
140 else
141 {
142 addrSpan.innerHTML = "籍贯不正确";
143 addrSpan.className = "fail";
144 return false;
145 }
146 }
147 function checkAgree()
148 {
149 var agree = document.getElementById("agree");
150 var sub = document.getElementById("sub");
151 if(!agree.checked)
152 {
153 sub.disabled = true;
154 }
155 else
156 {
157 sub.disabled = false;
158 }
159
160 }
161 function checkAll()
162 {
163 var a = checkUname();
164 var b = checkRealName();
165 var c = checkEmail();
166 var d = checkPhone();
167 var e = checkAge();
168 var f = checkPwd();
169 var g = checkFav();
170 var h = checkIntroduce();
171 var i = checkCode();
172 var j = checkAddress();
173 var k = checkAgree();
174 return(a&&b&&c&&d&&e&&f&&g&&h&&i&&j&&k);
175 }
176 </script>
177 </head>
178
179 <body onload = "createRandom();">
180 <form action="#" method="get" onsubmit="return checkAll();">
181 <table border="1" bordercolor="blue" cellspacing="0">
182 <tr>
183 <td width="100px" >用户名</td>
184 <td width="400px">
185 <input name="name" type="text" size="20" id="uname" alt="用户名" onblur="checkUname();"/>
186 <span id="unameSpan"></span>
187 </td>
188 </tr>
189 <tr>
190 <td width="100px" >真实名</td>
191 <td width="400px"><input name="name" type="text" id="realName" alt="真实名" size="20" onblur="checkRealName();"/>
192 <span id="realNameSpan"></span>
193 </td>
194 </tr>
195 <tr>
196 <td>密码</td>
197 <td><input id="pwd1" name="password" type="password" size="20" /></td>
198
199 </tr>
200 <tr>
201 <td>重复密码</td>
202 <td><input id="pwd2" name="rpassword" type="password" onblur="checkPwd();" alt="密码" size="20" />
203 <span id="pwdSpan"></span>
204 </td>
205 </tr>
206 <tr>
207 <td>验证码</td>
208 <td><input id="yzm" alt="验证码" name="yzm" type="text" size="20" onblur="checkCode();"/>
209 <span id="yzmSpan"></span>
210 <span id="yzmSpan2"></span>
211 </td>
212 </tr>
213 <tr>
214 <td>年龄</td>
215 <td><input id="age" onblur="checkAge();" alt="年龄" name="age" type="text" size="20" />
216 <span id="ageSpan"></span>
217 </td>
218 </tr>
219 <tr>
220 <td>手机号</td>
221 <td>
222 <input type="text" name="phone" size="20" onblur="checkPhone();" alt="手机号" id="phone">
223 <span id="phoneSpan"></span>
224 </td>
225 </tr>
226 <tr>
227 <td>邮箱</td>
228 <td>
229 <input type="text" name="email" size="20" onblur="checkEmail();" alt="邮箱" id="email">
230 <span id="emailSpan"></span>
231 </td>
232 </tr>
233 <tr>
234 <td width="100px">性别</td>
235 <td width="400px">
236 <input name="sex" type="radio" value="0" checked="true"/>男
237 <input name="sex" type="radio" value="1" />女
238 </td>
239
240 <tr>
241 <td>爱好</td>
242 <td>
243 <input name="hobby" type="checkbox" value="1" onclick="checkFav();"/>足球
244 <input name="hobby" type="checkbox" value="2" onclick="checkFav();"/>篮球
245 <input name="hobby" type="checkbox" value="3" onclick="checkFav();"/>羽毛球
246 <input name="hobby" type="checkbox" value="4" onclick="checkFav();"/>乒乓球
247 <span id="favSpan"></span>
248 </td>
249 </tr><tr>
250 <td>班级</td>
251 <td>
252 <select name="class" id = "class" onblur="checkAddress();">
253 <option>--请选择--</option>
254 <option>一年级一班</option>
255 <option>一年级二班</option>
256 </select>
257 <span id="classSpan"></span>
258 </td>
259 </tr>
260 <tr>
261 <td>说明</td>
262 <td>
263 <textarea name="introduce" cols="40" rows="6" id="introduce" onblur="checkIntroduce();" alt="介绍"></textarea>
264 <span id="introduceSpan"></span>
265 </td>
266 </tr>
267 <tr>
268 <td colspan="2" align="right">
269 <input type="checkBox" id="agree" onchange="checkAgree();">是否同意光软集团注册协议
270 </td>
271 </tr>
272 <tr>
273 <td>
274 <input type="reset" name="reset" value="重置" />
275 </td>
276 <td>
277 <input type="submit" name="sub" value="提交" id="sub" disabled="true" />
278 </td>
279 </tr>
280 </table>
281 </body>
282 </html>
![](https://images2015.cnblogs.com/blog/955092/201610/955092-20161014112143234-2005390123.jpg)