标签：code alert document group ack turn ++ 登陆 fun
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
<!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="../static/css/10.31.css" rel="stylesheet" type="text/css" charset="UTF-8"> <script src="../static/js/js.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>
.body { background-image: url("http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0A/0C/ChMkJ1kml16IfK9LAAEresWwFZcAAcmwgD0TcQAASuS23.jpeg"); 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 }
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("注册成功！") }
标签：code alert document group ack turn ++ 登陆 fun
原文地址：http://www.cnblogs.com/silu666-666/p/7768757.html
