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>
