完成登录与注册页面的前端
- 完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
- 用户名6-12位
- 首字母不能是数字
- 只能包含字母和数字
- 密码6-12位
- 注册页两次密码是否一致
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆测试界面</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="10.24.1.css" rel="stylesheet" type="text/css" charset="UTF-8"> <script src="10.24.1.js"></script> </head> <body class="body"> <div class="center-block" id="loginbox"> <div class="panel panel-primary" id="loginbox1_1"> <div class="panel-heading"> <h2 class="panel-title">登陆</h2> </div> <br> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" id="id" placeholder="请输入用户名"> </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" id="password" placeholder="请输入密码"> </div> <div id="error_box"> <br> </div> <div class="checkbox"> <label> <input type="checkbox">记住我 </label> </div> <br> <label><input type="button" class="btn btn-default" onclick="Login()" value="登陆"></input></label> <label><input type="button" class="btn btn-default" value="注册"></input></label> </form> </div> </div> <div class="center-block" id="zhucebox"> <div class="panel panel-primary" id="zhucebox1_1"> <div class="panel-heading"> <h2 class="panel-title">注册</h2> </div> <br> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" id="zcid" placeholder="请输入用户名"> </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" id="zcpassword" placeholder="请设置密码"> </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" id="repassword" placeholder="请再次输入密码"> </div> <div id="error_box2"> <br> </div> <br> <label><input type="button" class="btn btn-default" value="注册" onclick="Zhuce()"></input></label> </form> </div> </div> </body> </html>
外部JS文件：
function Login(){ var un=document.getElementById("id"); var us=document.getElementById("password"); var er=document.getElementById("error_box"); er.innerHTML = "<br>"; if(un.value.length<6||un.value.length>20){ er.innerHTML="用户名必须在6-20个字符之间"; return; }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){ er.innerHTML = "首字母不能为数字" return; }else for(var i=0;i<un.value.length;i++){ if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){ er.innerHTML="用户名只能为数字和字母" return; } } if(us.value.length<6||us.value.length>20){ er.innerHTML="密码必须在6-20个字符之间"; return; } window.alert("登陆成功！") } function Zhuce() { var un=document.getElementById("zcid"); var us=document.getElementById("zcpassword"); var rps=document.getElementById("repassword"); var er=document.getElementById("error_box2"); er.innerHTML="<br>"; if(un.value.length<6||un.value.length>20){ er.innerHTML="用户名必须在6-20个字符之间"; return; }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){ er.innerHTML = "首字母不能为数字" return; }else for(var i=0;i<un.value.length;i++){ if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){ er.innerHTML="用户名只能为数字和字母" return; } } if(us.value.length<6||us.value.length>20){ er.innerHTML="密码必须在6-20个字符之间"; return; }else for(var i=0;i<us.value.length;i++){ if(us.value.charCodeAt(i)!=rps.value.charCodeAt(i)){ er.innerHTML="密码不一致" return; } } window.alert("注册成功！") }
外部CSS文件：
.body { background-image: url("http://pic1.win4000.com/wallpaper/2017-10-23/59edb3a74c3e0.png"); background-repeat: repeat-y; } #loginbox{ padding: 100px 100px 20px;width: 600px; } #loginbox1_1{ padding:15px } #zhucebox{ padding: 100px 100px 20px;width: 600px; } #zhucebox1_1{ padding:15px }
效果展示：
