完成登录与注册页面的前端
完成登录与注册页面的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: "华文新魏";}
