简单的入门级别的注册页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户注册页面</title> 6 <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> 7 <script type="text/javascript" src="js/bootstrap.min.js" ></script> 8 <link rel="stylesheet" href="css/bootstrap.min.css" /> 9 10 11 <style> 12 body{margin-top: 10%;margin-left:10%;font-size: 15px;font-family: "微软雅黑";} 13 input{width:300px;} 14 input[placeholder]{font-family: "微软雅黑";padding-left: 5%;} 15 option{font-family: "幼圆";background-color: papayawhip;} 16 textarea{width: 100%;height: 100px;text-align: left;} 17 td{width: 70px;} 18 #reset{width: 26%;float: left;border:0px;margin: 2px;background-color: cornflowerblue;} 19 #reset:hover{background-color: burlywood;} 20 #login , #submit{width: 72%;float: right;border:0; margin: 2px;background-color: cornflowerblue;} 21 #submit:hover{background-color: springgreen;} 22 #login:hover{background-color: mediumspringgreen;} 23 .gly{width: 20px;text-align: right;padding-right: 6px;} 24 .error{color: red;width: 200px;} 25 #spanTd{width: 150px;} 26 #th{text-align: center;font-size: 20px;background-color: dodgerblue;} 27 #agreement{width: 1000px; height: 400px;text-align: left;} 28 #showMsg{width: 26%;float: left;border:0px;margin: 2px;background-color: mediumspringgreen;} 29 #checkcode{width: 40%;} 30 </style> 31 <script> 32 function checkUsername(){ 33 var regex = /^[\u4e00-\u9fa5a-z0-9_-]{2,10}$/; 34 var username = document.getElementById("username").value; 35 36 if (username.match(regex)) { 37 document.getElementById("usernameError").innerHTML = "<font style='color:green'>OK,Good</font>"; 38 return true; 39 } else { 40 document.getElementById("usernameError").innerHTML = "No"; 41 return false; 42 } 43 } 44 45 function checkPassword(){ 46 var password = document.getElementById("password").value; 47 var repassword = document.getElementById("repassword").value; 48 var passwordError = document.getElementById("passwordError"); 49 if (password != repassword) { 50 passwordError.innerHTML = "密码不一致"; 51 repassword.length = 0; 52 return false; 53 }else{ 54 passwordError.innerHTML = "<font style='color: green;'>密码匹配正确</font>"; 55 return true; 56 } 57 } 58 59 60 function checkPhone(){ 61 var regex = /^1[3|4|5|8][0-9]\d{4,8}$/; 62 var phone = document.getElementById("phone").value; 63 if (phone.match(regex)) { 64 document.getElementById("phoneError").innerHTML = "<font style='color: green;'>手机号码格式正确</font>"; 65 return true; 66 } else { 67 document.getElementById("phoneError").innerHTML = "手机号码输入错误"; 68 return false; 69 } 70 } 71 72 function checkEmail(){ 73 var regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; 74 var email = document.getElementById("email").value; 75 var emailError = document.getElementById("emailError"); 76 if (email.match(regex)) { 77 emailError.innerHTML = "<font style='color: green;'>邮箱输入正确</font>"; 78 return true; 79 } else { 80 emailError.innerHTML = "邮箱格式错误"; 81 return false; 82 } 83 } 84 85 86 </script> 87 88 </head> 89 <body> 90 <center> 91 <form method="post" action="" onsubmit="return test();"> 92 <table> 93 <tr id="th"> 94 <td colspan="3"> 95 用户表单注册 96 </td> 97 </tr> 98 <tr> 99 <td class="gly"> 100 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 101 <span class="glyphicon glyphicon-user"></span> 102 </button> 103 </td> 104 <td >用户账号</td> 105 <td> 106 <input type="text" id="username" name="username" onkeyup="checkUsername()" placeholder="username" required="required" autofocus="autofocus"/> 107 </td> 108 <td id="spanTd"> 109 <span class="error" id="usernameError"></span> 110 </td> 111 </tr> 112 <tr> 113 <td class="gly"> 114 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 115 <span class="glyphicon glyphicon-lock"></span> 116 </button> 117 </td> 118 <td>用户密码</td> 119 <td> 120 <input type="password" id="password" name="password" placeholder="password" required="required"/> 121 </td> 122 <td id="spanTd"> 123 <span class="error"></span> 124 </td> 125 </tr> 126 <tr> 127 <td class="gly"> 128 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 129 <span class="glyphicon glyphicon-lock"></span> 130 </button> 131 </td> 132 <td>验证密码</td> 133 <td> 134 <input type="password" id="repassword" onkeyup="checkPassword()" name="repassword" placeholder="repassword" required="required"/> 135 </td> 136 <td id="spanTd"> 137 <span class="error" id="passwordError"></span> 138 </td> 139 </tr> 140 <tr> 141 <td class="gly"> 142 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 143 <span class="glyphicon glyphicon-user"></span> 144 </button> 145 </td> 146 <td>真实姓名</td> 147 <td> 148 <input type="text" id="name" name="name" placeholder="real name" required="required"/> 149 </td> 150 </tr> 151 <tr> 152 <td class="gly"> 153 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 154 <span class="glyphicon glyphicon-user"></span> 155 </button> 156 </td> 157 <td>用户身份</td> 158 <td> 159 <select style="width: 99%;margin-left: 1px;"> 160 <option value="0" seleted="selected">--请选择--</option> 161 <option value="1">学生</option> 162 <option value="2">教师</option> 163 </select> 164 </td> 165 166 <td> 167 <span></span> 168 </td> 169 </tr> 170 <tr> 171 <td class="gly"> 172 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 173 <span class="glyphicon glyphicon-phone-alt"></span> 174 </button> 175 </td> 176 <td>联系电话</td> 177 <td> 178 <input type="tel" id="phone" onkeyup="checkPhone()" name="phone" placeholder="phone number" required="required"/> 179 </td> 180 <td id="spanTd"> 181 <span class="error" id="phoneError"></span> 182 </td> 183 </tr> 184 <tr> 185 <td class="gly"> 186 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 187 <span class="glyphicon glyphicon-paperclip"></span> 188 </button> 189 </td> 190 <td>常用邮箱</td> 191 <td> 192 <input type="email" id="email" onkeyup="checkEmail()" name="email" placeholder="normal email" required="required"/> 193 </td> 194 <td id="spanTd"> 195 <span class="error" id="emailError"></span> 196 </td> 197 </tr> 198 199 200 201 <tr> 202 <td class="gly"> 203 <button type="button" class="btn btn-default btn-sm" disabled="disabled"> 204 <span class="glyphicon glyphicon-bell"></span> 205 </button> 206 </td> 207 <td>验证注册</td> 208 <td> 209 <input type="text" id="checkcode" name="checkcode" placeholder="请输入验证码" required="required"/> 210 </td> 211 <td id="spanTd"> 212 <span class="error" id="emailError"></span> 213 </td> 214 </tr> 215 216 217 218 219 <tr> 220 <td colspan="3"> 221 <input type="reset" name="reset" id="reset" value="重置" /> 222 <input type="submit" name="submit" id="submit" value="同意以下协议并注册" disabled="disabled"/> 223 </td> 224 </tr> 225 <tr> 226 <td colspan="3"> 227 <button id="showMsg">查看协议</button> 228 <a id="login">跳转到登录</a> 229 </td> 230 </tr> 231 232 233 <script> 234 $(document).ready(function(){ 235 $("#checkcode").blur(function(){ 236 if ($("#username").value!=null && $("#password").value!=null && $("#repassword").value!=null && $("#phone").value!=null && $("#email").value!=null && $("#checkcode").value!=null) { 237 $("#submit").removeAttr("disabled"); 238 $("#submit").attr("disabled",false); 239 240 } else{ 241 $("#submit").attr("disabled",true); 242 } 243 }); 244 }); 245 </script> 246 247 248 <script> 249 $(document).ready(function(){ 250 $("#showMsg").click(function(){ 251 $("#agreement").slideToggle("slow"); 252 }); 253 }); 254 </script> 255 </table> 256 </form> 257 <!--这个就是一个实例--> 258 <div id="agreement" class="agreement" style="height: 200px;" hidden="hidden"> 259 <p>尊敬的用户欢迎您注册成为本网站会员。请用户仔细阅读以下全部内容。 260 如用户不同意本服务条款任意内容，请不要注册或使用本网站服务。如用户通过本网站注册程序，即表示用户与本网站已达成协议，自愿接受本服务条款的所有内容。 261 此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。</p> 262 <p>一、本站服务条款的确认和接纳<br>本网站涉及的各项服务的所有权和运作权归本网站所有。本网站所提供的服务必须按照其发布的服务条款和操作规则严格执行。 263 本服务条款的效力范围及于本网站的一切产品和服务，用户在享受本网站的任何服务时，应当受本服务条款的约束。</p> 264 <p>二、服务简介<br>本网站运用自己的操作系统通过国际互联网络为用户提供各项服务。用户必须: 265 1. 提供设备，如个人电脑、手机或其他上网设备。 2. 个人上网和支付与此服务有关的费用。</p> 266 <p>三、用户在不得在本网站上发布下列违法信息<br> 267 1. 反对宪法所确定的基本原则的； 2. 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的； 268 3. 损害国家荣誉和利益的； 4. 煽动民族仇恨、民族歧视，破坏民族团结的； 5. 破坏国家宗教政策，宣扬邪教和封建迷信的； 269 6. 散布谣言，扰乱社会秩序，破坏社会稳定的； 7. 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的； 270 8. 侮辱或者诽谤他人，侵害他人合法权益的； 9. 含有法律、行政法规禁止的其他内容的。</p> 271 <p>四、有关个人资料<br> 272 用户同意: 273 1. 提供及时、详尽及准确的个人资料。 2. 同意接收来自本网站的信息。 274 3. 不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。 275 4. 本网站不公开用户的姓名、地址、电子邮箱和笔名。除以下情况外: 276 a) 用户授权本站透露这些信息。 b) 相应的法律及程序要求本站提供用户的个人资料。</p> 277 <p>五、服务条款的修改<br> 278 本网站有权在必要时修改服务条款，一旦条款及服务内容产生变动，本网站将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以主动取消获得的本网站信息服务。如果用户继续享用本网站信息服务，则视为接受服务条款的变动。</p> 279 <p>六、用户隐私制度<br> 280 尊重用户个人隐私是本网站的一项基本政策。所以，本网站一定不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本网站中的非公开内容，除非有法律许可要求或本网站在诚信的基础上认为透露这些信息在以下四种情况是必要的: 1. 遵守有关法律规定，遵从本网站合法服务程序。 2. 保持维护本网站的商标所有权。 3. 在紧急情况下竭力维护用户个人和社会大众的隐私安全。 4. 符合其他相关的要求。</p> 281 <p>七、用户的帐号、密码和安全性 282 <br>用户一旦注册成功，将获得一个密码和用户名。用户需谨慎合理的保存、使用用户名和密码。如果你不保管好自己的帐号和密码安全，将负全部责任。 283 另外，每个用户都要对其帐户中的所有活动和事件负全责。你可随时根据指示改变你的密码。用户若发现任何非法使用用户帐号或存在安全漏洞的情况，请立即通告本网站。 284 八、 拒绝提供担保 用户明确同意信息服务的使用由用户个人承担风险。本网站不担保服务不会受中断，对服务的及时性，安全性，出错发生都不作担保，但会在能力范围内，避免出错。</p> 285 <p>九、有限责任<br> 286 如因不可抗力或其它本站无法控制的原因使本站销售系统崩溃或无法正常使用导致网上交易无法完成或丢失有关的信息、记录等本站会尽可能合理地协助处理善后事宜，并努力使客户免受经济损失，同时会尽量避免这种损害的发生。</p> 287 <p>十、用户信息的储存和限制<br> 288 本站有判定用户的行为是否符合国家法律法规规定及本站服务条款权利，如果用户违背本网站服务条款的规定，本网站有权中断对其提供服务的权利。</p> 289 <p>十一、用户管理<br> 290 用户单独承担发布内容的责任。用户对服务的使用是根据所有适用于本站的国家法律、地方法律和国际法律标准的。用户必须遵循: 291 1. 使用网络服务不作非法用途。 2. 不干扰或混乱网络服务。 3. 遵守所有使用网络服务的网络协议、规定、程序和惯例。 用户须承诺不传输任何非法的、骚扰性的、中伤他人的、辱骂性的、恐性的、伤害性的、庸俗的，淫秽等信息资料。另外，用户也不能传输何教唆他人构成犯罪行为的资料； 292 不能传输助长国内不利条件和涉及国家安全的资料；不能传输任何不符合当地法规、国家法律和国际法律的资料。未经许可而非法进入其它电脑系统是禁止的。 若用户的行为不符合以上提到的服务条款，本站将作出独立判断立即取消用户服务帐号。用户需对自己在网上的行为承担法律责任。用户若在本站上散布和传播反动、色情或其它违反国家法律的信息，本站的系统记录有可能作为用户违反法律的证据。</p> 293 <p>十二、通告<br> 294 所有发给用户的通告都可通过重要页面的公告或电子邮件或常规的信件传送。服务条款的修改、服务变更、或其它重要事件的通告都会以此形式进行。</p> 295 <p>十三、信息内容的所有权<br> 296 本网站定义的信息内容包括: 文字、软件、声音、相片、录象、图表；在广告中全部内容；本网站为用户提供的其它信息。所有这些内容受版权、商标、标签和其它财产所有权法律的保护。所以，用户只能在本网站和广告商授权下才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。本站所有的文章版权归原文作者和本站共同所有， 297 任何人需要转载本站的文章，必须征得原文作者或本站授权。</p> 298 <p>十四、法律<br> 299 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国的法律。用户和本网站一致同意服从本网站所在地有管辖权的法院管辖。 300 如发生本网站服务条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，而其它条款则依旧保持对用户的约束力。</p> 301 </div> 302 303 </center> 304 </body> 305 </html>
① 初始页面视图：
② 包含各种验证：
提醒：需要验证码的同学，可以查看我的下一篇随笔：JS验证码生成（入门级别）