完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="../static/css/cc.css"> <script src="../static/js/cc.js"></script> </head> <body> <div class="box"> <h2>登录</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnlogin()">登录</button> </div> </div>
html{
100%;
height: 100%;
overflow: hidden;
}
body{
100%;
height: 100%;
font-family: "Open Sans",sans-serif;
margin: 0;
background-color: white;
}
h2{
background-color: #4a77d4;
margin:30px 0 20px;
font-weight: 400;
font-size: 26px;
line-height: 1;
}
div.box{
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -200px;
300px;
height: 300px;
padding: 50px 50px 30px;
background-color: #ccc;
}
div.box h2{
color: black;
text-shadow: 0 0 10px;
letter-spacing: 1px;
text-align: center;
}
div.input_box{
278px;
height: 18px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px;
border-top: 1px solid #4a77d4;
border-left: 1px solid #4a77d4;
border-right: 1px solid #4a77d4;
border-bottom: 1px solid #4a77d4;
border-radius: 4px;
background-color: #4a77d4;
}
.button{
300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
}
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 > 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; } } // oUpass if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "密码要6-20位"; return; } window.alert("登录成功!") }
结果:
注册:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="../static/css/dd.css"> <script src="../static/js/dd.js"></script> </head> <body> <div class="box"> <h2>注册</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div class="input_box"> <input id="upass1" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnlogin()">注册</button> </div> </div>
html{
100%;
height: 100%;
overflow: hidden;
}
body{
100%;
height: 100%;
font-family: "Open Sans",sans-serif;
margin: 0;
background-color: white;
}
h2{
background-color: #4a77d4;
margin:30px 0 20px;
font-weight: 400;
font-size: 26px;
line-height: 1;
}
div.box{
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -200px;
300px;
height: 300px;
padding: 50px 50px 30px;
background-color: #ccc;
}
div.box h2{
color: black;
text-shadow: 0 0 10px;
letter-spacing: 1px;
text-align: center;
}
div.input_box{
278px;
height: 18px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px;
border-top: 1px solid #4a77d4;
border-left: 1px solid #4a77d4;
border-right: 1px solid #4a77d4;
border-bottom: 1px solid #4a77d4;
border-radius: 4px;
background-color: #4a77d4;
}
.button{
300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
}
function fnlogin() { var oUname = document.getElementById("uname"); var oUpass = document.getElementById("upass"); var oUpass1 = document.getElementById("upass1"); var oError = document.getElementById("error_box"); 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; } } // oUpass if (oUpass.value.length < 6 || oUpass.value.length > 20) { oError.innerHTML = "密码要6-20位"; return; } else if (oUpass.value!==oUpass1.value){ oError.innerHTML="两次密码不一致"; return; } window.alert("注册成功") }
结果: