簡單的入門級別的注冊頁面：
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驗證碼生成（入門級別）
