完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录的代码
js23.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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> <div class="input_box"></div> <div class="input_box"> username:<input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"></div> <div class="input_box"></div> <div class="input_box"> password:<input id="upass" type="password" placeholder="请输入密码"> </div> <div class="input_box"></div> <div id="error_box" ><br></div> <div class="input_box"> <button id="button" onclick="fnLogin()">登录</button>      <button id="button" onclick="window.location.replace('register.html')">注册</button> </div> </div> </body> </html>
js23.css
*{ font-family: 华文细黑; font-size: 20px; margin: 0; padding: 0; text-align: center; } .box{ border: solid 1px #dddddd; background: #FFFFFF; position:absolute; top:42%; left:50%; margin-top: -160px; margin-left:-196px; width:390px; height:410px; } #error_box{ color: red; font-size: 20px; } .input_box{ width:400px; padding-top: 20px; padding-bottom:15px; margin: 0 auto; overflow: hidden; font-size: 30px; } .box h2{ font-weight: normal; color: black; font-size: 20px; line-height: 30px; height: 30px; overflow: hidden; text-align: center; border-bottom: solid 1px #dddddd; background: #f7f7f7; } body{ background:url("http://img1.gtimg.com/ent/pics/hv1/129/192/1925/125222214.jpg") no-repeat; width:400px; height:auto; overflow:hidden; background-size:100%; } #button{ width: 60px; height: 30px; }
js23.js
function fnLogin(){ var oUname = document.getElementById("uname"); var oUpass = document.getElementById("upass"); var oError = document.getElementById("error_box"); oError.innerHTML="<br>"; //uname if (oUname.value.length>10 || oUname.value.length < 6){ oError.innerHTML="用户名必须是6-10位!"; 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; } } //upass if(oUpass.value.length>10 || oUpass.value.length<6 ){ oError.innerHTML="用户密码6-10位!"; return; } window.alert("登录成功!") }
注册面的登录代码
js23.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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> <div class="input_box"> username:   <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> tel:               <input id="number" type="text" placeholder="请输入常用手机号"> </div> <div class="input_box"> password:   <input id="upass" type="password" placeholder="请输入密码"> </div> <div class="input_box"> again password:<input id="chpass" type="password" placeholder="请再次输入密码"> </div> <div id="error_box" ><br></div> <div class="input_box"> <button id="button" onclick="fnLogin1()">注册</button>      <button id="button"onclick="window.location.replace('login2.html')">转到登录</button> </div> </div> </body> </html>
js23.css
*{ font-family: 华文细黑; font-size: 20px; margin: 0; padding: 0; text-align: center; } .box{ border: solid 1px #dddddd; background: #FFFFFF; position:absolute; top:42%; left:50%; margin-top: -160px; margin-left:-196px; width:390px; height:410px; } #error_box{ color: red; font-size: 20px; } .input_box{ width:400px; padding-top: 20px; padding-bottom:15px; margin: 0 auto; overflow: hidden; font-size: 30px; } .box h2{ font-weight: normal; color: black; font-size: 20px; line-height: 30px; height: 30px; overflow: hidden; text-align: center; border-bottom: solid 1px #dddddd; background: #f7f7f7; } body{ background:url("http://img1.gtimg.com/ent/pics/hv1/129/192/1925/125222214.jpg") no-repeat; width:400px; height:auto; overflow:hidden; background-size:100%; } #button{ width: 60px; height: 30px; }
js23.js
function fnLogin1() { var oUname = document.getElementById("uname"); var oNumber = document.getElementById("number"); var oUpass = document.getElementById("upass"); var oError = document.getElementById("error_box"); oError.innerHTML = "<br>"; //uname if (oUname.value.length == 0) { oError.innerHTML = "用户名不能为空!"; return } if (oUname.value.length > 10 || oUname.value.length < 6) { oError.innerHTML = "用户名必须是6-10位!"; 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; } } //tel if (oNumber.value.length == 0) { oError.innerHTML = "手机号不能为空!"; return } if (oNumber.value.length != 11) { oError.innerHTML = "手机号必须是11位!"; return; } else for (var j = 0; j < oNumber.value.length; j++) { if ((oNumber.value.charCodeAt(j) < 48) && (oNumber.value.charCodeAt(j)) > 57) { oError.innerHTML = "手机号只能为数字!"; return; } } //upass if (oUpass.value.length == 0) { oError.innerHTML = "密码不能为空!"; return } if (oUpass.value.length > 10 || oUpass.value.length < 6) { oError.innerHTML = "用户密码6-10位!"; return; } if (document.getElementById("upass").value != document.getElementById("chpass").value) { oError.innerHTML = "密码不一致"; return } window.alert("注册成功!") }