完成登錄與注冊頁面的HTML+CSS+JS，其中的輸入項檢查包括：
用戶名6-12位
首字母不能是數字
只能包含字母和數字
密碼6-12位
注冊頁兩次密碼是否一致
登錄：HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登錄</title> 6 <link href="../static/css/ll.css" rel="stylesheet" type="text/css"> 7 <script src="../static/js/hl.js"></script> 8 9 </head> 10 11 <body> 12 <div><h1>武林|登錄</h1></div> 13 14 <div class="box"> 15 16 <div class="input_box"> 17 姓名：<input type="text" id="uname" placeholder="敢問閣下大名"> 18 </div> 19 <br> 20 <div class="input_box"> 21 密碼：<input type="password" id="upass" placeholder="請輸入通關密碼"> 22 </div> 23 <br> 24 <div id="error_box"><br></div> 25 <div class="input_box"> 26 <button onclick="fnLogin()">登錄</button> 27 28 </div> 29 <br> 30 </div> 31 32 </div> 33 </body> 34 </html>
JS
1 function fnLogin() { 2 var oUname = document.getElementById("uname"); 3 var oError = document.getElementById("error_box"); 4 var oUpass = document.getElementById("upass"); 5 6 oError.innerHTML="<br>" 7 8 if(oUname.value.length<6 || oUname.value.length >12){ 9 oError.innerHTML="用戶名6-12位"; 10 return; 11 }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){ 12 oError.innerHTML="第一位只能是字母"; 13 return; 14 } else for (var i=0 ; i<oUname.value.length;i++){ 15 if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122){ 16 oError.innerHTML="只能是字母或數字"; 17 return; 18 } 19 } 20 if(oUpass.value.length<6 || oUpass.value.length>12){ 21 oError.innerHTML="密碼6-12位"; 22 return; 23 } 24 window.alert("登錄成功") 25 }
CSS：
h1{ align:center; padding-right: 0; padding-left: 0; font-weight: bold; font-size: 20px; padding-bottom: 15px; font-family: "華文新魏"; margin: 0; color: red; padding-top: 0;} input_box{ align:center; margin:550px; padding-left:550px; font-family: "華文新魏"; color:red; } body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; background:#000; padding-bottom:40px; color:red; padding-top:40px; font-family: "華文新魏";}
注冊：HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊</title> <link href="../static/css/ll.css" rel="stylesheet" type="text/css"> <script src="../static/js/hl.js"></script> </head> <body> <div><h1>武林|注冊</h1></div> <div class="box"> <div class="input_box"> 請輸入賬號：<input id="name" type="text"placeholder="請輸入用戶名"><br> </div> <br> <div class="input_box"> 請輸入密碼：<input id="password" type="password"placeholder="請輸入密碼"><br><br> 請確認密碼：<input id="password2" type="password"placeholder="請再次輸入密碼"><br> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">注冊</button> </div> <br> </div> </div> </body> </html>
JS
function fnLogin() { var oUname = document.getElementById("name") var oError = document.getElementById("error_box") var opassword = document.getElementById("password") var opassword2 = document.getElementById("password2") oError.innerHTML = "<br>" if(oUname.value.length<6||oUname.value.length>12){ oError.innerHTML="用戶名需為6-12位"; return; } else if ((oUname.value.charCodeAt(0)>=48) && oUname.value.charCodeAt(0)<=57){ oError.innerHTML="首字母不能是數字"; return; } else for(var i=0;i<oUname.value.length;i++){ if((oUname.value.charCodeAt(i)<48||oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||oUname.value.charCodeAt(i)>122){ oError.innerHTML="只能包含字母和數字"; return; } } if(opassword.value.length<6||opassword.value.length>12){ oError.innerHTML="密碼需為6-12位"; return; } if(opassword2.value!=opassword.value){ oError.innerHTML="密碼不一致"; return; } window.alert("注冊成功！") }
CSS
h1{ align:center; padding-right: 0; padding-left: 0; font-weight: bold; font-size: 20px; padding-bottom: 15px; font-family: "華文新魏"; margin: 0; color: red; padding-top: 0;} input_box{ align:center; margin:550px; padding-left:550px; font-family: "華文新魏"; color:red; } body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; background:#000; padding-bottom:40px; color:red; padding-top:40px; font-family: "華文新魏";}
