完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登陆html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link href="../static/css/load.css" rel="stylesheet" type="text/css"> <script src="../static/js/load.js"></script> </head> <body> <div><h1>打开代码的世界</h1></div> <div class="aa"><script>document.write("loading....")</script> </div> <div class="flex-container"> <div class="box"> <p id="we">aaa</p> <script> document.getElementById("we").innerHTML=Date(); <!--代替id=we的内容--> </script> <div class="input_box"> 登录 <input id="uname" type="text" placeholder="write down your name"> </div> <br> <div class="input_box"> 密码 <input id="upass" type="password" placeholder="write down your PIN"> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">load</button> </div> <br> </div> </div> </body> </html> <style> </style>
登录css
h1{ align:center; padding-right: 0; padding-left: 0; font-weight: bold; font-size: 16px; padding-bottom: 15px; margin: 0; color: #904; padding-top: 0;} body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; background:#000; padding-bottom:40px; color:black; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; } form { display: block; margin-top: 0em;} .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; padding-left: 100px; padding-top: 40px; background-color: pink;} aa { color: pink } input_box{ align:center; margin:550px; padding-left:550px; 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:verdana,Arial,Helvetica,sans-serif; }
登录js
function fnLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var opassward = document.getElementById("upass"); oError.innerHTML = "<br>"; // oUname 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(opassward.value.length<6 || opassward.value.length>12){ oError.innerHTML="密码6-12位"; return; } window.alert("登录成功!") }
注册html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link href="../static/css/register.css" rel="stylesheet" type="text/css"> <script src="../static/js/register.js"></script> </head> <body> <div><h1>打开代码的世界</h1></div> <div class="aa"><script>document.write("loading....")</script> </div> <div class="flex-container"> <div class="box"> <h2>welcome to register</h2> <div class="input_box"> 请输入账号 <input id="uname" type="text" placeholder="write down your name"> </div><br> <div class="input_box"> 请输入密码 <input id="upass" type="password" placeholder="write down your PIN"></div><br> <div class="input_box"> 再输入密码 <input id="upass1" type="password" placeholder="write down your PIN"></div><br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()" >register</button></div> </div> </div> </body> </html>
注册css
h1{ align:center; padding-right: 0; padding-left: 0; font-weight: bold; font-size: 16px; padding-bottom: 15px; margin: 0; color: #904; padding-top: 0;} body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; background:#000; padding-bottom:40px; color:black; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; } form { display: block; margin-top: 0em;} .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 300px; padding-left: 100px; padding-top: 40px; background-color: pink;} input_box{ align:center; margin:570px; padding-left:570px; 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:verdana,Arial,Helvetica,sans-serif; }
注册js
function fnLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUiphone = document.getElementById("uiphone"); var oUpass = document.getElementById("upass"); var oUpass1 = document.getElementById("upass1"); 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(oUpass.value.length<6 || oUpass.value.length>12){ oError.innerHTML="密码6-12位"; return; } if (oUpass1.value!=oUpass.value ) { oError.innerHTML = "rewrite your PIN"; return; } window.alert("注册成功") }