完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录</title> 6 <link href="../static/css/1.css" rel="stylesheet" type="text/css"> 7 <script src="../static/js/1.js"></script> 8 9 </head> 10 <body> 11 <div class="box"> 12 <h2>登录</h2> 13 14 <div class="input_box"> 15 <input type="text" id="uname" placeholder="请输入用户名"> 16 </div> 17 <div class="input_box"> 18 <input type="password" id="upass" placeholder="请输入密码"> 19 </div> 20 <div id="error_box"><br></div> 21 <div class="input_box"> 22 <button onclick="fnLogin()">登录</button> 23 </div> 24 25 </div> 26 </body> 27 </html>
1 function fnLogin() { 2 var oUname = document.getElementById("uname"); 3 var oUpass = document.getElementById("upass"); 4 var oError = document.getElementById("error_box"); 5 6 oError.innerHTML = "<br>" 7 // uname 8 if (oUname.value.length > 20 || oUname.value.length < 6) { 9 oError.innerHTML = "用户名：6-20位"; 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 21 // upass 22 if (oUpass.value.length > 20 || oUpass.value.length < 6) { 23 oError.innerHTML = "密码：6-20位"; 24 return; 25 } 26 window.alert("登录成功！") 27 }
1 *{ 2 margin: 0; 3 padding: 0; 4 font-family:"华文楷体"; 5 font-size: 12px; 6 } 7 8 .box { 9 border: 1px solid #cccccc; 10 position: absolute; 11 top: 42%; 12 left: 50%; 13 height: 320px; 14 width: 390px; 15 background: #FFF; 16 margin-left: -195px; 17 margin-top: -160px; 18 } 19 20 h2 { 21 font-size: 16px; 22 text-align: center; 23 height: 46px; 24 font-weight:normal; 25 color:#666; 26 line-height: 46px; 27 backgroud:#f7f7f7; 28 overflow: hidden; 29 border-bottom:solid 1px #ddd; 30 } 31 .input_box { 32 width: 350px; 33 padding-bottom: 15px; 34 margin:0 auto; 35 overflow:hidden; 36 } 37 38 input { 39 align-self: center; 40 height: 30px; 41 width: 280px; 42 43 } 44 45 button { 46 align-content: center; 47 font-family: 华文楷体; 48 font-size: 28px; 49 text-align: center; 50 background: #cccccc; 51 height: 40px; 52 width: 300px; 53 }
