完成登录与注册页面的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/20.css"> <script src="../static/JS/JS30.js"></script> </head> <body style="background: burlywood"> <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()">login</button> <a class="link-forget cl-link-blue" href="get_password.html">忘记密码</a><br>
<a href="注册yemian.html"><input type="button" class="btn btn-info" name="regist" value="新用户注册"></a>
</div> </div> </body> </html>
CSS:
.box {
border: 1px solid palevioletred;
position: absolute;
top: 25px;
left: 40px;
float: left;
height: 300px;
400px;
margin-left: 30%;
} h1 { font-size: 28px; text-align: center; background: palevioletred; margin-top: auto; height: 40px; 400px; } .input_box { height: 60px; 80px; margin-left: 10%; } input { align-self: center; height: 30px; 300px; } button { align-content: center; font-size: 28px; text-align: center; background: #cccccc; height: 40px; 300px; }
JS:
function fnLogin() { var oUname = document.getElementById("name"); var oError = document.getElementById("error_box"); var oUword = document.getElementById("pass");
var isoError = true;
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 ((oUword.value.length < 6) || (oUword.value.length > 20)) { 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/20.css"> <script src="../static/JS/注册.js"></script> </head> <body style="background: burlywood"> <div class="box"> <h1>注册</h1> <div class="input_box"> 注册帐号：<input id="zcuname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> 注册密码：<input id="zcupassword1" type="password" placeholder="请输入密码"> </div>
<div class="input_box">
再次输入:<input id="zcupassword2" type="password" placeholder="请再次输入密码" >
</div> <div id="zcerror_box"><br></div> <div class="input_box"> <button onclick="fnEnroll()">立即注册</button>
<a href="10.31.html">已注册</a>
</div> </div> </body> </html>
JS:
function fnEnroll() { var zcoUname = document.getElementById("zcuname"); var zcoError = document.getElementById("zcerror_box"); var zcoUword1 = document.getElementById("zcupassword1"); var zcoUword2 = document.getElementById("zcupassword2"); var isoError = true; zcoError.innerHTML = "<br>"; if (zcoUname.value.length<6|| zcoUname.value.length>12) { zcoError.innerHTML = "用户名为6到12位"; isoError = false; return; } else if((zcoUname.value.charCodeAt(0)>=48)&&(zcoUname.value.charCodeAt(0)<=57)){ zcoError.innerHTML = "用户名首位不能是数字"; return; } else for (var i = 0; i < zcoUname.value.length; i++) { if(zcoUname.value.charCodeAt(i)<48||(zcoUname.value.charCodeAt(i)>57)&&(zcoUname.value.charCodeAt(i)<97)||zcoUname.value.charCodeAt(i)>122){ zcoError.innerHTML = "用户名只能是字母与数字"; return; } } if (zcoUword1.value.length<6||zcoUword1.value.length>20){ zcoError.innerHTML = "密码为6到20位"; isoError = false; return; } if (zcoUword1.value!=zcoUword2.value){ zcoError.innerHTML="两次密码不一致"; return; } window.alert("注册成功！！"); }
.box {
border: 1px solid palevioletred;
position: absolute;
top: 25px;
left: 40px;
float: left;
height: 300px;
400px;
margin-left: 30%;
} h1 { font-size: 28px; text-align: center; background: palevioletred; margin-top: auto; height: 40px; 400px; } .input_box { height: 60px; 80px; margin-left: 10%; } input { align-self: center; height: 30px; 300px; } button { align-content: center; font-size: 17px; text-align: center; background: #cccccc; height: 40px; 300px; }