完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录页面代码:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <link rel="stylesheet" type="text/css" href="../static/css/deng.css"> <script src="../static/jsp/deng.js"></script> </head> <body> <div class="box"> <h1>登录</h1> <div class="input_box"> <input id="name" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="pass" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br> </div> <div class="input_box"> <button onclick="fnLogin()">登录</button> </div> </div> </body> </html>
css代码:
.box { border: 1px solid #cccccc; position: absolute; top: 25px; left: 40px; float: left; height: 300px; width: 400px; } h1 { font-family: 宋体; font-size: 28px; text-align: center; background: #cccccc; margin-top: auto; height: 40px; width: 400px; } .input_box { height: 60px; width: 80px; margin-left: 10%; } input { align-self: center; height: 30px; width: 300px; } button { align-content: center; font-family: 宋体; font-size: 28px; text-align: center; background: #cccccc; height: 40px; width: 300px; }
js代码:
function fnLogin() { var oUname = document.getElementById("name"); var oUpass = document.getElementById("pass"); var oError = document.getElementById("error_box"); var isError = true; oError.innerHTML = '<br>' // if (oUname.value.length >20 || oUname.value.length < 6) { oError.innerHTML = "name:6-20位"; isError = false; return; }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="first letter."; 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(0)<97) || (oUname.value.charCodeAt(0)>122)){ oError.innerHTML="only letter or number"; return; } } if (oUpass.value.length>20 || oUpass.value.length<6){ oError.innerHTML = "password:6-20"; return; } window.alert("登录成功!") }
注册页面:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="../static/css/zhuce.css"> <script src="../static/jsp/zhuce.js"></script> </head> <body> <div class="box"> <h1>注册</h1> <div class="input_box"> <input id="name" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="phone" type="text" placeholder="手机号"> </div> <div class="input_box"> <input id="pass" type="password" placeholder="请输入密码"> </div> <div class="input_box"> <input id="passcom" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br> </div> <div class="input_box"> <button onclick="fnLogin()">注册</button> </div> </div> </body> </html>
css代码:
.box {
border: 1px solid #cccccc;
position: absolute;
top: 25px;
left: 40px;
float: left;
height: 400px;
width: 450px;
}
h1 {
font-family: 宋体;
font-size: 28px;
text-align: center;
background: #cccccc;
margin-top: auto;
height: 45px;
width: 450px;
}
.input_box {
height: 60px;
width: 80px;
margin-left: 12%;
}
input {
align-self: center;
height: 30px;
width: 300px;
}
button {
align-content: center;
font-family: 宋体;
font-size: 28px;
text-align: center;
background: #cccccc;
height: 40px;
width: 300px;
}
#error_box{
font-family: 宋体;
font-size: 15px;
margin-left: 10%;
}
js代码:
function fnLogin() {
var oUname = document.getElementById("name");
var oUphone = document.getElementById("phone");
var oUpass = document.getElementById("pass");
var oUpasscom = document.getElementById("passcom");
var oError = document.getElementById("error_box");
var isError = true;
oError.innerHTML = '<br>';
//
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "name:6-20位";
isError = false;
return;
} else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
oError.innerHTML = "first letter.";
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(0) < 97) || (oUname.value.charCodeAt(0) > 122)) {
oError.innerHTML = "only letter or number";
return;
}
}
if (oUphone.value.length != 11) {
oError.innerHTML = "error phone";
return;
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "password:6-20";
return;
}
if (oUpass.value != oUpasscom.value) {
oError.innerHTML = "sorry,the password is false";
return
}
window.alert("注册成功!")
}