完成登錄與注冊頁面的HTML+CSS+JS，其中的輸入項檢查包括：
用戶名6-12位
首字母不能是數字
只能包含字母和數字
密碼6-12位
注冊頁兩次密碼是否一致
登錄界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/nino.css"> <script src="../static/js/aiba.js"></script> </head> <body> <div class="box"> <h2>登錄</h2> <div class="input_box"> <input id="uname" class="sign" type="text" placeholder="請輸入用戶名"> </div> <div class="input_box"> <input id="upass" class="sign" type="password" placeholder="請輸入密碼"> </div> <div id="error_box"><br> </div> <div class="input_box"> <input type="submit" name="commit" value="登錄" class="sign-in-button" data-disable-with="登錄" onclick="myLogin()"> </div> </div> </div> </body> </html>
注冊界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/nino.css"> <script src="../static/js/aiba.js"></script> </head> <body> <div class="box"> <h2>注冊</h2> <div class="input_box"> <input id="uname" class="sign" type="text" placeholder="請輸入用戶名"> </div> <div class="input_box"> <input id="upass" class="sign" type="password" placeholder="請輸入密碼"> </div> <div class="input_box"> <input id="upas" class="sign" type="password" placeholder="請再輸入一次密碼"> </div> <div id="error_box"><br> </div> <div class="input_box"> <input type="submit" name="commit" value="注冊" class="sign-in-button" data-disable-with="注冊" onclick="myLogin()"> </div> </div> </div> </body> </html>
css文件
h2{ text-align: center; color:#3194d0; font-size: 20px; } .sign{ width: 100%; height: 50px; margin-bottom: 0; vertical-align: middle; } .box{ width: 300px; height: 155px; margin-left: 450px; margin-top: 150px; } .sign-in-button{ width: 100%; padding: 9px 18px; font-size: 18px; border: none; border-radius: 25px; color: #fff; background: #3194d0; cursor: pointer; outline: none; display: block; clear: both; }
js文件
function myLogin() { var oUname=document.getElementById("uname") var oPass=document.getElementById("upass") var oPas=document.getElementById("upas") var oError=document.getElementById("error_box") oError.innerHTML="<br>" if(oUname.value.length<6||oUname.value.length>20){ oError.innerHTML='請輸入6-20位的用戶名' return; }else for(var i=0;i<oUname.value.length;i++){ if(oUname.value.charCodeAt(i)>=48||oUname.value.charCodeAt(i)<=57){ oError.innerHTML='請輸入合法字符' } return; } if(oUname.value.charCodeAt(0)>=48&&oUname.value.charCodeAt(0)<=57){ oError.innerHTML='首字母不能為數字' return; } if(oPas.value!=oPass.value){ oError.innerHTML='密碼輸入不正確' } if(oPass.value.length<6||oPass.value.length>20){ oError.innerHTML='請輸入6-20位的密碼' return; } }
效果：
