注册界面实操--表单验证
1.验证码生成
2.表单校验
3.正则表达式
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 <script type="text/javascript"> 6 7 /*********生成验证码*******/ 8 var ran; 9 function yzm(){ 10 var span = document.getElementById("yzm_span"); 11 ran = Math.floor(Math.random()*9000+1000); 12 span.innerText = ran; 13 } 14 15 /*****验证码输入校验*******/ 16 function checkYzm(){ 17 var yzm = document.getElementById("yzm").value; 18 var span = document.getElementById("yzm2_span"); 19 if (yzm == ran){ 20 span.innerText="验证码正确"; 21 span.style.color="green"; 22 return true; 23 }else{ 24 span.innerText="验证码输入错误"; 25 span.style.color="red"; 26 return false; 27 } 28 } 29 30 31 /******同意协议确认************/ 32 function checkAgree(){ 33 var check = document.getElementById("check"); 34 var sub = document.getElementById("sub"); 35 36 37 //简洁，注意是取反的 38 sub.disabled = !check.checked; 39 } 40 41 /********用户名校验*******/ 42 function checkName(){ 43 var reg = /^[\u4e00-\u9fa5]{3,5}$/; 44 return check(reg,"uname");//注意引号 45 } 46 47 /********密码校验*******/ 48 function checkPwd(){ 49 var reg = /^\d{3,6}$/ 50 return check(reg,"psw"); 51 } 52 53 function checkEmail(){ 54 var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 55 return check(reg,"email"); 56 } 57 58 /***********重复代码封装成函数**********/ 59 function check(reg,id){ 60 var inp = document.getElementById(id); 61 var val = inp.value; 62 var span = document.getElementById(id+"_span"); 63 var alt = inp.alt; 64 65 if (val == null || val == ""){ 66 span.innerText = "×"+alt+"不能为空"; 67 span.style.color = "red"; 68 return false; 69 70 }else if(reg.test(val)){ 71 span.innerText = "√"+alt+"合法"; 72 span.style.color = "green"; 73 return true; 74 } 75 else{ 76 span.innerText = "×"+alt+"不合法"; 77 span.style.color = "red"; 78 return false; 79 } 80 } 81 82 83 function checkSex(){ 84 var sex = document.getElementsByName("sex"); 85 var span = document.getElementById("sex_span"); 86 for (var i in sex){ 87 if (sex[i].checked){ 88 span.innerText ="性别选择成功"; 89 span.style.color = "green"; 90 return true; 91 } 92 } 93 94 span.innerText= "请选择性别"; 95 span.style.color = "red"; 96 return false; 97 } 98 99 100 /********校验地址*******/ 101 function checkAddress(){ 102 var sel = document.getElementById("sel").value; 103 var span = document.getElementById("sel_span"); 104 if (sel == 0){ 105 span.innerText = "请选择籍贯"; 106 span.style.color = "red"; 107 return false; 108 }else{ 109 span.innerText = "已选择"; 110 span.style.color = "green"; 111 return true; 112 } 113 } 114 115 /*********onsubmit**********/ 116 117 function zong(){ 118 var flag = checkName()&&checkPwd()&&checkAddress()&&checkEmail()&&checkAgree()&&checkSex()&&checkYzm(); 119 120 return flag; 121 } 122 </script> 123 </head> 124 <body onload="yzm()"> 125 <center> 126 <h3>注册页面</h3> 127 <hr /> 128 <form action="" method="post" onsubmit="return zong()"> 129 <table> 130 <tr height="35px"> 131 <td width="150px">用户名：</td> 132 <td width="400px"> 133 <input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/> 134 <span id="uname_span"> 135 *用户名是3-5位数字 136 </span> 137 </td> 138 </tr> 139 <tr height="35px"> 140 <td>密码：</td> 141 <td> 142 <input type="password" name="psd" id="psw" value="" alt="密码" onblur="checkPwd()"/> 143 <span id="psw_span"> 144 145 </span> 146 </td> 147 </tr> 148 <tr height="35px"> 149 <td>手机号：</td> 150 <td> 151 <input type="text" name="phone" id="phone" value="" alt="手机号"/> 152 <span id="phone_span"> 153 154 </span> 155 </td> 156 </tr> 157 <tr height="35px"> 158 <td>邮箱：</td> 159 <td> 160 <input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()"/> 161 <span id="email_span"> 162 163 </span> 164 165 166 </td> 167 </tr> 168 <tr height="35px"> 169 <td>性别</td> 170 <td> 171 男：<input type="radio" name="sex" id="1" value="" onclick="checkSex()"/> 172 女：<input type="radio" name="sex" id="0" value="" onclick="checkSex()"/> 173 <span id="sex_span"></span> 174 </td> 175 </tr> 176 <tr height="35px"> 177 <td>爱好：</td> 178 <td> 179 <input type="checkbox" name="fav" id value="1" />唱歌 180 <input type="checkbox" name="fav" id value="2" />睡觉 181 <input type="checkbox" name="fav" id value="3" />LOL<br /> 182 <input type="checkbox" name="fav" id value="4" />高尔夫 183 <input type="checkbox" name="fav" id value="5" />旅游 184 <input type="checkbox" name="fav" id value="6" />篮球 185 </td> 186 </tr> 187 <tr height="35px"> 188 <td>籍贯</td> 189 <td> 190 <select name="adress" id="sel" onchange="checkAddress()"> //onchange 191 <option value="0">--请选择--</option> 192 <option value="1">河南</option> 193 <option value="2">湖南</option> 194 <option value="3">海南</option> 195 <option value="4">云南</option> 196 </select> 197 <span id="sel_span"> 198 199 </span> 200 </td> 201 </tr> 202 <tr height="35px"> 203 <td>验证码</td> 204 <td> 205 <input type="number" name="yzm" id="yzm" value="" onblur="checkYzm()"/> 206 <span id="yzm_span"></span> 207 <span id="yzm2_span"> 208 209 </span> 210 </td> 211 </tr> 212 <tr height="35px"> 213 <td>个人介绍</td> 214 <td> 215 <textarea name="intro" rows="8" cols="30"></textarea> 216 </td> 217 </tr> 218 <tr height="35px"> 219 <td colspan="2" align="center"> 220 <input type="checkbox" name="" id="check" value="" onclick="checkAgree()"/> 221 是否同意协议 222 </td> 223 224 </tr> 225 <tr height="35px"> 226 <td colspan="2" align="center"> 227 <input type="submit" name="sub" id="sub" value="注册" disabled= "true" /> 228 </td> 229 </tr> 230 </table> 231 </form> 232 </center> 233 </body> 234 </html>
