完成登录与注册页面的前端
2017-10-31 19:55 095罗其婷 阅读(148) 评论(0) 编辑 收藏 举报完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆</title> <link href="../static/css/js23.css" rel="stylesheet" type="text/css"> <script src="../static/js/js23.js"></script> </head> <body> <div class="box"> <h2>欢迎进入</h2> <h3>登录界面</h3> <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="myLogin()">登陆</button> </div> </div> </body> </html>
function myLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUpass=document.getElementById("upass"); oError.innerHTML="<br>"; //uname 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 = "first number"; 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 = "only letter or number"; return; } } //upass if(oUpass.value.length<6||oUpass.value.length>12){ oError.innerHTML="密码6-12位" return; } if((oUname.value.length<6||oUname.value.length>12)&&(oUpass.value.length<6||oUpass.value.length>12)){ oError.innerHTML="用户名密码要求6-12位" return; } window.alert("登陆成功!") }
body{
background: greenyellow;
padding-right:500px;
padding-left:500px;
color: deeppink;
padding-top:50px;
font-size: 16px;
background: black;
font-family:verdana,Arial,Helvetica,sans-serif;
}
#input_box{
align:center;
margin:650px;
padding-left:650px;
}
{
padding-left: 80px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link href="../static/css/f.css" rel="stylesheet" type="text/css"> <script src="../static/js/f.js"></script> </head> <body> <div class="box"> <h2>欢迎进入</h2> <h3>注册界面</h3> <div class="input_box"> 请输入账号 <input id="uname" type="text" placeholder="请输入你的姓名"> </div><br> <div class="input_box"> 请输入密码 <input id="upass" type="password" placeholder="请输入密码"></div><br> <div class="input_box"> 再输入密码 <input id="upass1" type="password" placeholder="请再次输入密码"></div><br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()" >注册</button></div> </div> </body> </html>
function fnLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUiphone = document.getElementById("uiphone"); var oUpass = document.getElementById("upass"); var oUpass1 = document.getElementById("upass1"); 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="first number"; 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="only letter or number"; return; } } if(oUpass.value.length<6 || oUpass.value.length>12){ oError.innerHTML="密码6-12位"; return; } if (oUpass1.value!=oUpass.value ) { oError.innerHTML = "rewrite your PIN"; return; } window.alert("注册成功") }
body{
background: greenyellow;
padding-right:500px;
padding-left:500px;
color: deeppink;
padding-top:50px;
font-size: 16px;
background: black;
font-family:verdana,Arial,Helvetica,sans-serif;
}
#input_box{
align:center;
margin:650px;
padding-left:650px;
}
{
padding-left: 80px;
}