完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="../static/css/denglu1.1.css" type="text/css">
<script src="../static/JS/denglu1.1.js"></script>
</head>
<body style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
<div class="box" >
<h2 class="denglu">登录</h2>
<div class="input_box">
<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="uword" type="password" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">登录</button>
</div>
</div>
</body>
</html>
登录.CSS
.box{
border: 1px solid #cccccc;
334px;
margin: 5px;
text-align: center;
}
.denglu{
background-color: cornflowerblue;
font-family: 华文楷体;
font-size: 35px;
}
.input_box{
height: 40px;
}
登录JS
function fnLogin() {
var oUname = document.getElementById("uname")
var oError = document.getElementById("error_box")
var oUword = document.getElementById("uword")
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 = "密码为6到20位";
return
}
window.alert("登录成功！！")
}
注册。HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/css/zhuece.css" type="text/css">
<script src="/static/JS/zhuce.js"></script>
</head>
<body style="text-align: center">
<div class="box">
<h2 class="zhuce">注册</h2>
<div class="input_box">
<input id="zcuname" type="text" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="zcuword1" type="password" placeholder="请输入密码">
</div>
<div class="input_box">
<input id="zcuword2" type="password" placeholder="请再次输入密码">
</div>
<div id="zcerror_box"><br></div>
<div class="input_box">
<button onclick="fnEnroll()">立即注册</button>
</div>
</div>
</body>
</html>
注册。CSS
.box{
border: 1px solid #cccccc;
334px;
margin: 5px;
text-align: center;
}
.zhuce{
font-family: "Bodoni MT Poster Compressed";
}
.input_box{
height: 40px;
}
注册。JS
function fnEnroll() {
var zcoUname = document.getElementById("zcuname")
var zcoError = document.getElementById("zcerror_box")
var zcoUword1 = document.getElementById("zcuword1")
var zcoUword2 = document.getElementById("zcuword2")
zcoError.innerHTML = "<br>"
if (zcoUname.value.length < 6 || zcoUname.value.length > 12) {
zcoError.innerHTML = "用户名为6到12位";
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位";
return
}
if (zcoUword1.value()!=zcoUword2.value()){
zcoError.innerHTML="两次密码不一致"
}
window.alert("注册成功！！")
}