完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登陆</title>
<link href="design.css" rel="stylesheet" type="text/css">
<script src="confirm.js"></script>
</head>
<<body>
<div class="box" >
<div class="jar" ><h2>欢迎登陆</h2></div>
<div class="input_box">
账号 <input id="name" type="text" placeholder="请输入用户名"></div><br>
<div class="input_box">
密码 <input id="password" type="password" placeholder="请输入密码"></div><br>
<div id="error_box"><br></div>
<div class="ja">
<button οnclick="myLogin()" >登陆</button></div>
</div>
</div>
</body>
</html>
div{
margin:0 auto;
text-align:center;
backgroup-color:lightblue;
}
.box{
width:500px;
height:220px;
border-color:blue;
border-style:groove;
border-width:1px;
margin-top:100px;
}
.input_box{
font-size:18px;
font-weight:bold;
}
.ja{
width:100px;
height:30px;
boder-style:hidden;
}
function fnLogin() {
var uname = document.getElementById("name");
var uError = document.getElementById("error_box");
var upassward = document.getElementById("password");
uError.innerHTML = "<br>";
// oUname
if(uname.value.length<6 || uname.value.length >12){
uError.innerHTML="用户名6-12";
return;
}else if ((uname.value.charCodeAt(0)>=48) && (uname.value.charCodeAt(0)<=57)){
uError.innerHTML="第一位只能是字母";
return;
} else for (var i=0 ; i<oUname.value.length;i++){
if (uname.value.charCodeAt(i)<48 || (uname.value.charCodeAt(i)>57)&&(uname.value.charCodeAt(i)<97)|| uname.value.charCodeAt(i)>122){
uError.innerHTML="只能是字母或数字";
return;
}
}
if(upassward.value.length<6 || upassward.value.length>12){
uError.innerHTML="密码6-12位";
return;
}
window.alert("登录成功!")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link href="designR.css" rel="stylesheet" type="text/css">
<script src="confirmR.js"></script>
</head>
<body>
<div class="box" >
<div class="jar" ><h2>欢迎注册</h2></div>
<div class="input_box">
账号 <input id="name" type="text" placeholder="请输入用户名"> </div><br>
<div class="input_box">
密码 <input id="password" type="password" placeholder="请输入密码"></div><br>
<div class="input_box">
再输入 <input id="passwordagain" type="password" placeholder="请再次输入密码"></div><br>
<div id="error_box"><br></div>
<div class="ja">
<button οnclick="fnLogin()" >注册</button></div>
</div>
</div>
</body>
</html>
div{
margin:0 auto;
text-align:center;
backgroup-color:lightblue;
}
.box{
width:500px;
height:300px;
border-color:blue;
border-style:groove;
border-width:1px;
margin-top:100px;
}
.input_box{
font-size:18px;
font-weight:bold;
}
.ja{
width:100px;
height:30px;
boder-style:hidden;
}
function fnLogin() {
var uname = document.getElementById("name")
var uError = document.getElementById("error_box")
var upassword = document.getElementById("password")
var upasswordagain = document.getElementById("passwordagain")
uError.innerHTML="<br>"
if(uname.value.length<6 || uname.value.length >20){
uError.innerHTML="用户名应为6到20字符";
return;
}else if ((uname.value.charCodeAt(0)>=48) && (uname.value.charCodeAt(0)<=57)){
uError.innerHTML="第一位只能是字母";
return;
} else for (var i=0 ; i<uname.value.length;i++){
if (uname.value.charCodeAt(i)<48 || (uname.value.charCodeAt(i)>57)&&(uname.value.charCodeAt(i)<97)|| uname.value.charCodeAt(i)>122){
uError.innerHTML="用户名只能为数字或者字母";
return;
}
}
if(upassword.value.length<6 || upassword.value.length>12){
uError.innerHTML="密码应为6到20字符";
return;
}
if (upasswordagain.value!=upassword.value ) {
uError.innerHTML = "重新输入你的密码";
return;
}
window.alert("注册成功")
}