完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录页面:
1.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link href="../static/css/wow.css" rel="stylesheet" type="text/css"> <script src="../static/js/wow.js"></script> </head> <body class="bg"> <div id="container"> <div class="box"> <h2 id="denglu">登录</h2> <div class="input_box"> <input type="text" id="uname" placeholder="请输入用户名"> </div> <div class="input_box"> <input type="password" id="upass" placeholder="请输入密码"> </div> <div class="error" id="error_box"><br></div> <div class="input_box"> <button id="login" type="submit" οnclick="fnLogin()">登录</button> <button id="cancel" type="cancel" οnclick="fnLogin()">取消</button> </div> </div> </body> </html>
2.js代码
function fnLogin() {
var oUname = document.getElementById("uname");
var oUpass = document.getElementById("upass");
var oError = document.getElementById("error_box");
oError.innerHTML = "<br>"
// uname
if (oUname.value.length > 20 || oUname.value.length < 6) {
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;
}
}
// upass
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "亲,密码至少6-20位哦";
return;
}
window.alert("用户登录成功!")
}
3.css代码
*{ margin: 0; padding: 0; font-family:"华文新魏"; font-size: 12px; } .bg { background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509547320024&di=5e67e4bd86013c364815958d31c9766d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a7cf554bfe79000001bf7250f6c3.jpg%402o.jpg); background-repeat: no-repeat; background-size: 100%; } .box { border: 1px solid #cccccc; position: absolute; top: 42%; left: 50%; height: 320px; width: 390px; background: #FFF; margin-left: -195px; margin-top: -160px; } h2 { font-size: 16px; text-align: center; height: 46px; font-weight:normal; color:#666; line-height: 46px; backgroud:#f7f7f7; overflow: hidden; border-bottom:solid 1px #ddd; } #denglu{ font-size: 35px; } #uname{ font-size: 20px; } #upass{ font-size: 20px; } .input_box { width: 350px; padding-bottom: 15px; margin:0 auto; overflow:hidden; } input { align-self: center; height: 31px; width: 280px; } button { align-content: center; font-family: 华文新魏; font-size: 31px; text-align: center; background: #cccccc; height: 40px; width: 300px; } #error_box{ font-family: "华文楷体"; font-size: 29px; }
登录页面如图:
注册页面:
1.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="../static/css/wow.css"> <script src="../static/jsp/wow.js"></script> </head> <body><body class="bg"> <div id="container"> <div class="box"> <h2 id="zhuce">注册</h2> <div class="input_box"> <input type="text" id="uname" placeholder="请输入用户名"> </div> <div class="input_box"> <input type="phone" id="phone" type="text" placeholder="手机号"> </div> <div class="input_box"> <input type="password" id="pass" placeholder="请输入密码"> </div> <div class="input_box"> <input type="password" id="password" placeholder="请再次输入密码"> </div> <<div class="error" id="error_box"><br></div> <div class="input_box"> <button id="register" οnclick="fnLogin()">注册</button> </div> </div> </body> </html>
2.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("注册成功!") }
注册页面如图: