首页 > 代码库 > JS表单验证
JS表单验证
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 else102 {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 else124 {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 else141 {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 else156 {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>
JS表单验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。