完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <link href="css/vvv.css" rel="stylesheet" type="text/css"> <script src="js/ggg.js"></script> </head> <body> <div class="div1"> <div class="div2">登录</div> <div class="div3"> <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名"> </div> <div class="div3"> 密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">登陆</button> </div> </div> <br> </body> </html>
css：
div{
margin: 0 auto;
text-align: center;
background-color: blue;
font-family:微软雅黑;
font-size: 12px;
}
.div1{
width:390px;
height: 320px;
border-color: red;
border-style: groove;
border-width: 1px;
margin-top:100px ;
}
.div2{
font-family:微软雅黑;
border-bottom-style: groove;
border-bottom-width:5px;
line-height: 50px;
background-color: yellowgreen;
}
.div3{
font-family: 幼圆;
width: 350px;
height: 50px;
font-size: 18px;
align:"center";
}
js：
function myLogin(){ var uName=document.getElementById("username"); var uError=document.getElementById("error_box"); var upass = document.getElementById("userpass"); uError.innerHTML = "<br>" //uname if(uName.value.length>20 || uName.value.length<6){ uError.innerHTML="name;6-20"; return; }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){ uError.innerHTML="first number."; 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 = "only letter or number."; return; } } if(upass.value.length>20 || upass.value.length<6){ uError.innerHTML="password;6-20"; return; } window.alert("登陆成功 ！") }
注册：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>界面</title> <link href="css/yyy.css" rel="stylesheet" type="text/css"> <script src="js/rrr.js"></script> </head> <div class="div1"> <div class="div2">登录注册</div> <div class="div3"> 请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称"> </div> <div class="div3"> 设置密码：<input id="userpass" type="text" placeholder="请输入密码"> </div> <div class="div3"> 重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码"> </div> <div class="div3"> 请输入手机号：<input id="phonenumber" type="text" placeholder="请输入11位手机号"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">注册</button> </div> <div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div> </div> <br> </body> </html>
css：
div{
margin: 0 auto;
text-align: center;
background-color: greenyellow;
font-family:微软雅黑;
font-size: 12px;
}
.div1{
width: 350px;
height: 350px;
border-color: blue;
border-style: groove;
border-width: 1px;
margin-top:150px ;
}
.div2{
font-family:微软雅黑;
border-bottom-style: groove;
border-bottom-width: 5px;
line-height: 30px;
background-color: yellowgreen;
}
.div3{
font-family: 幼圆;
width: 350px;
height: 50px;
font-size: 18px;
align:"center";
}
js：
function myLogin(){ var uName=document.getElementById("username"); var uError=document.getElementById("error_box"); var upass = document.getElementById("userpass"); var uphone = document.getElementById("phonenumber"); var upass1 = document.getElementById("userpass1"); uError.innerHTML = "<br>" //uname if(uName.value.length>12 || uName.value.length<6){ uError.innerHTML="name;6-12"; return; }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){ uError.innerHTML="first number."; 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 = "only letter or number."; return; } } if(upass.value.length>12 || upass.value.length<6){ uError.innerHTML="password;6-12"; return; } if(upass.value != upass1.value){ uError.innerHTML="两次密码输入不一致"; return; } if(uphone.value.length>11 || uphone.value.length<11){ uError.innerHTML="phone;11"; return; } window.alert("注册成功 ！") }
