完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册界面</title> <link href="../static/css/denglu.css" rel="stylesheet" type="text/css"> <script src="../static/js/denglu.js"></script> </head> <body> <form method="post" action="index.html"> <div class="box"> <h1>用户登录</h1> <div class="input_box1"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box2"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnlogin()">登录</button> </div> <a href="#"><div class="btn">Sign In</div></a> <!-- End Btn --> <a href="#"><div id="btn2">Sign Up</div></a> <!-- End Btn2 --> </div> <!-- End Box --> </form> </body> </html>
body{ background:aliceblue; margin: 0 auto 0 auto; width:100%; text-align:center; margin: 20px 0px 20px 0px; } h1{ font-size:1.5em; color:#525252; } .box{ background:white; width:300px; border-radius:6px; margin: 0 auto 0 auto; padding:0px 0px 70px 0px; border: #7db9b5 2px solid; } .input_box1{ background:#ecf0f1; border: #ccc 1px solid; border-bottom: #ccc 2px solid; padding: 8px; width:250px; color:#AAAAAA; font-size:1em; border-radius:4px; } .input_box2{ border-radius:4px; background:#ecf0f1; border: #ccc 1px solid; padding: 8px; width:250px; font-size:1em; } .btn{ background:#2ecc71; width:125px; padding-top:5px; padding-bottom:5px; color:white; border-radius:4px; border: #27ae60 1px solid; margin-top:20px; margin-bottom:20px; float:left; margin-left:16px; font-weight:800; font-size:0.8em; } .btn:hover{ background:#2CC06B; } #btn2{ float:left; background:#3498db; width:125px; padding-top:5px; padding-bottom:5px; color:white; border-radius:4px; border: #2980b9 1px solid; margin-top:20px; margin-bottom:20px; margin-left:10px; font-weight:800; font-size:0.8em; } #btn2:hover{ background:#3594D2; }
function fnlogin() { var oUname = document.getElementById("uname"); var oUpass = document.getElementById("upass"); var oError = document.getElementById("error_box"); oError.innerHTML = "<br>" if (oUname.value.length < 6 || oUname.value.length > 12) { oError.innerHTML = "用户名必须大于6位或少于12位!"; return; } else if(oUname.charCodeAt(0)>=48&&oUname.charCodeAt(0)<=57){ oError.innerHTML="首字母不能是数字!"; return; } if (oUpass.value.length < 6 || oUpass.value.length > 12) { oError.innerHTML = "密码必须大于6位或少于12位!"; return; } window.alert("登录成功!") }