完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Welcome 0</title> <link rel="stylesheet"type="text/css"href="../css/100.css"> <script src="../js/100.js"></script> </head> <body class="bg"> <div class="box" > <div class="lg1" ><h2>❤ 欢迎登录 ❤</h2></div> <div class="box2" > 姓名：<input id="name" type="text" placeholder="请输入用户名"><br> 密码：<input id="password" type="password" placeholder="请输入密码"><br> </div> <div id="error_box"><br></div> <div class="lg2" > <button type="submit" onclick="myLogin()">登录</button> <button type="submit" onclick=window.alert("是否取消登录！")>取消</button> <br> <div class="design"> <div class="lg3" ><h4>o(*￣▽￣*)ブ♡~ welcome here</h4></div> <p>Design by Doublewhere</p> </div> </div> </body> </html>
.bg{ background:url(.jpg); background-size: 100% 100%; background-attachment: fixed; } div{ margin:0 auto; text-align:center; } .box{ width:500px; height:250px; border-color:#8B4513; border-width:1px; margin-top:100px; } .lg1{ font-size: 20px; color: #FF4500; } .box2{ font-size:18px; font-weight:bold; color: #8B4513; } .lg2{ width:100px; height:30px; boder-style:hidden; } .design{ font-size:8px; color:#D2691E; } .lg3{ font-size:8px; color:#FF4500; } #login{ width: 18%; padding: 5px 10px; font-size: 15px; border: none; font-family: 'Yu Mincho Demibold'; border-radius: 25px; background:cornflowerblue; cursor: pointer; color: white; }
function myLogin() { var oUname = document.getElementById("name") var oError = document.getElementById("error_box") var opassword = document.getElementById("password") oError.innerHTML="<br>" if(oUname.value.length<6||oUname.value.length>20){ oError.innerHTML="用户名需为6-20个字符"; 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>20){ oError.innerHTML="密码需在6-20个字符内"; return; } window.alert("登陆成功！") }
***************************************************************************************************
注册:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Welcome 0</title> <link rel="stylesheet" type="text/css" href="../css/100.css"> <script src="../js/100.js"></script> </head> <body class="bg"> <div class="box" > <div class="lg1" ><h2>❤ 欢迎注册 ❤</h2></div> <div class="box2" > 请输入账号: <input id="name" type="text" placeholder="name"><br> 请输入密码: <input id="password" type="password" placeholder="PIN"><br> 再输入密码: <input id="password1" type="password" placeholder="PIN"><br> </div> <div id="error_box"><br></div> <div class="lg2" > <button type="submit" onclick="myLogin()">注册</button> <button type="submit" onclick=window.alert("是否取消注册！")>取消</button> <br> <div class="design"> <div class="lg3" ><h4> </h4></div> <p>Design by Doublewhere</p> </div> </div> </body> </html>
function myLogin() { var oUname = document.getElementById("name") var oError = document.getElementById("error_box") var opassword = document.getElementById("password") var opassword1 = document.getElementById("password1") oError.innerHTML="<br>" if(oUname.value.length<6||oUname.value.length>20){ oError.innerHTML="用户名需为6-20个字符"; 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>20){ oError.innerHTML="密码需在6-20个字符内"; return; } if (opassword1.value != opassword.value) { oError.innerHTML = "登陆请重新输入你的密码"; return; } window.alert("注册成功！") }
.bg{ background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509690085664&di=71dd0a4ae8060c361beb5890ef7827a1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201309%2F26%2F20130926093508_w4ZC5.jpeg); background-size: 100% 100%; background-attachment: fixed; } div{ margin:0 auto; text-align:center; } .box{ width:500px; height:250px; border-color:#8B4513; border-width:1px; margin-top:100px; } .lg1{ font-size: 20px; color: #556b2f; } .box2{ font-size:16px; font-weight:bold; color: #556b2f; } .lg2{ width:100px; height:30px; boder-style:hidden; } .design{ font-size:8px; color:#8fbc8f; } .lg3{ font-size:8px; color:#556b2f; } #login{ width: 18%; padding: 5px 10px; font-size: 15px; border: none; font-family: 'Yu Mincho Demibold'; border-radius: 25px; background:cornflowerblue; cursor: pointer; color: white;
