完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" type="text/css" href="../static/dl.css"> <script src="../static/js/denlu.js"></script> </head> <body> <div class="box"> <div id="tittle"><h2 align="center">登录</h2></div> <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="foLogin()">登录</button> </div> <button type="button" onclick="foLogin()"><a href="zhuce.html">注册</a></button> </div> </body> </html>
登录js代码：
function foLogin() {
var oUname = document.getElementById("uname");
var oError = document.getElementById("error_box");
var oUpass = document.getElementById("upass");
var isoError = true;
oError.innerHTML = "<br>";
if (oUname.value.length < 6|| oUname.value.length > 20) {
oError.innerHTML = "用户名要6-20位";
isoError = false;
return;
}else if((oUname.value.charCodeAt(0)<=48)&&(oUname.value.charCodeAt(0)>=57)){
oError.innerHTML="首字母不能为数字";
isoError = false;
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="只能包含字母和数字";
isoError = false;
return;
}
}
if (oUpass.value.length < 6|| oUpass.value.length > 20) {
oError.innerHTML = "密码要6-20位";
isoError = false;
return;
}
window.alert("登录成功！！")
}
注册HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="../static/dl.css"> <script src="../static/js/yx.js"></script> </head> <body> <div class="box"> <div id="tittle"><h2 align="center">新用户注册</h2></div> <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="foLogin()">注册</button> </div> </div> </body> </html>
注册js代码：
function foLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); var oUpass1=document.getElementById("upass1"); var isoError = true; oError.innerHTML = "<br>"; if (oUname.value.length < 6 || oUname.value.length > 20) { oError.innerHTML = "用户名要6-20位"; isoError = false; return; }else if((oUname.value.charCodeAt(0)<=48)&&(oUname.value.charCodeAt(0)>=57)){ oError.innerHTML="首字母不能为数字"; isoError = false; 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="只能包含字母和数字"; isoError = false; return; } } if (oUpass.value.length < 6 || oUpass.value.length > 20){ oError.innerHTML = "密码要6-20位"; isoError = false; return; } if(oUpass.value()!=oUpass1.value()){ oError.innerHTML="两次密码不一致"; isoError = false; return; } window.alert("注册成功！！") }
css代码：
box{
300px;
}
div.box {
border: 1px solid #000000;
height: 290px;
300px;
float: left;
margin: 50px;
background: antiquewhite;
}
div.input_box{
text-align: center;
height: 50px;
auto;
padding: 5px
}
div.input_box button{
border: aqua;
font-size: 20px;
100px;
height: 30px;
background: coral;
}
