完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title >GZCC</title>
<link rel="stylesheet" type="text/css" href="../css/200.css">
<script src="../js/39.js"></script>
</head>
<body class="abc">
<h1 align="center" class="ads">Welcome to gzcc</h1>
<h4 align="center"class="ads"> Management system</h4>
<div style="margin:0" align="center">
<div id="container" style="width:400px " >
<div class="touming" id="header" style="background-color: aqua;color: darkcyan;"><h2 align="center" style="margin-bottom:0;">LOG IN TO GZCC</h2></div>
<form align="center" >
username:<input id="uname" type="text"name="username"placeholder="username"><br>
password:<input id="upass" type="password"name="password" placeholder="password"><br>
<a href="https://image.baidu.com/">Forgot Password?</a>
<div id="error_box"> <br></div>
<input class="body" type="button" onclick="myLogin()" value="Log In"style="width: 250px;height: 50px;background-color: aqua;">
<div id="content" style=";height:150px;width:400px;float:left;"></div>
<div class="touming" id="footer" style="background-color:aqua;clear:both;text-align:center;color: darkcyan;">版权 © djc</div>
</form>
</div>
</div>
</body> </html>
mid{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.ads{
color: darkcyan;
}
.abc{
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509126419578&di=6142001e3a66f610415e56a1d6ae5cb3&imgtype=0&src=http%3A%2F%2F2t.5068.com%2Fuploads%2Fallimg%2F160627%2F65-16062G52344.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
.touming{
filter:alpha(Opacity=90);-moz-opacity:0.5;opacity: 0.5;
color: black;
}
.body {
font-size: large;
filter:alpha(Opacity=90);-moz-opacity:0.5;opacity: 0.5;
color: black;
}
function myLogin() {
var oUname=document.getElementById("uname");
var oUpass=document.getElementById("upass");
var oError=document.getElementById("error_box");
oError.innerHTML="<br>";
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.lengtt;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 (oUpass.value.length<6||oUpass.value.length>20 ){
oError.innerHTML="密码需要大于6或者密码需要小于20.";
return;
}
window.alert("LINK START!")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title >GZCC</title>
<link rel="stylesheet" type="text/css" href="../css/200.css">
<script src="../js/aaa.js"></script>>
</head>
<body class="abc">
<h1 align="center" class="ads">Welcome to gzcc</h1>
<h4 align="center"class="ads"> Management system</h4>
<div style="margin:0" align="center">
<div id="container" style="width:400px " >
<div class="touming" id="header" style="background-color: aqua;color: darkcyan;"><h2 align="center" style="margin-bottom:0;"> CREATE ACCOUNT</h2></div>
<form align="center" >
<input id="uname" type="text"name="username"placeholder="someone@example.com"><br>
<input id="upass" type="password"name="password" placeholder="create password"><br>
<input id="oupass" type="password"name="apassword" placeholder="again password"><br>
<a href="https://image.baidu.com/">Log in </a>
<div id="error_box"> <br></div>
<input class="body" type="button" onclick="myLogin()" value="CREATE"style="width: 250px;height: 50px;background-color: aqua;">
<div id="content" style=";height:150px;width:400px;float:left;"></div>
<div class="touming" id="footer" style="background-color:aqua;clear:both;text-align:center;color: darkcyan;">版权 © djc</div>
</form>
</div>
</div>
</body> </html>
function myLogin(){
var oUname = document.getElementById("uname");
var oError = document.getElementById("error_box");
var oUpass = document.getElementById("upass");
var ooUpass= document.getElementById("oupass");
oError.innerHTML = "<br>"
//oUname
if (oUname.value.length>12 || oUname.value.length<6){
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(upass.value.length>12 || upass.value.length<6){
oError.innerHTML="密码为6到12位数";
return;
}
if(oUpass.value != ooUpass.value){
oError.innerHTML="两次密码输入不一致";
return;
}
window.alert("已成功注册")
}
