完成登錄與注冊頁面的HTML+CSS+JS，其中的輸入項檢查包括：
用戶名6-12位
首字母不能是數字
只能包含字母和數字
密碼6-12位
注冊頁兩次密碼是否一致
1,HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸</title>
<link href="js23.css" rel="stylesheet" type="text/css">
<script src="js23.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>
<button onclick=window.alert("此頁面詢問您是否要離開：您輸入的數據可能不會被保存")>取消</button>
<button onclick="fnLogin()" >注冊</button></div>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊</title> <link href="js23.css" rel="stylesheet" type="text/css"> <script src="js23.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="checkpass" type="password" placeholder="請確認密碼"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">登錄</button> <button onclick=window.alert("此頁面詢問您是否要離開：您輸入的數據可能不會被保存")>取消</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");
var oCheckpass = document.getElementById("checkpass");
oError.innerHTML ="<br>"
//uname
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;
}
}
//upass
if(oUpass.value.length>20||oUpass.value.length<6){
oError.innerHTML ="密碼長度是:6-20";
return;
}
if(oCheckpass.value!=oUpass.value){
oError.innerHTML="輸入密碼不一致。" ;
return;
}else if(oCheckpass.value==""){
oError.innerHTML="未確認密碼。";
return;
}
window.alert("登陸成功！")
}
3,CSS
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size: 12px;
}
.box{
width:390px;
height:320px;
border:solid 1px #ddd;
background:#FFF;
position:absolute;
left:50%;
top:42%;
margin-left:-195px;
margin-top:-160px;
}
.box h2{
font-weight:normal;
color: aquamarine;
font-size: 16px;
line-height: 46px;
height: 46px;
overflow: hidden;
text-align: center ;
border-bottom: solid 1px #10030a;
background: #f7f7f7;
}
.input_box{
width:450px;
padding-bottom:35px;
margin: 0 auto;
overflow:hidden;
}
.error_box{
color: #f36974;
}
