完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="../static/css/0082.css"> <script src="../static/js/0082.js"></script> </head> <body> <div class="box" > <h1>登录</h1> <form method="post"> <input type="text" id="uname" placeholder="Uname" required="required"> <br><input type="password" id="upass" placeholder="Password" required="required"> <div id="error_box"><br></div> <div class="input_box"> <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">登录</button><br> <button onclick=window.alert("重置") type="submit" class="btn btn-primary btn-block btn-large">取消</button> </div> </form> </div> </body> </html> 登录js function myLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var opassword = document.getElementById("upass"); if(oUname.value.length<6||oUname.value.length>12){ oError.innerHTML="用户名必须6-20字符"; 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; } } 登录css .box{ 500px; height:300px; border:solid 1px hotpink; background: greenyellow; position: absolute; text-align: center; font-family: "微软雅黑"; } .input_box{ 350px; padding-bottom: 15px; margin: 0 auto; overflow: hidden; }
注册html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="../static/css/0082.css"> <script src="../static/js/0082.js"></script> </head> <body> <div class="box" > <h1>注册</h1> <form method="post"> <input type="text" id="uname" placeholder="Uname" required="required"> <input type="text" id="email" placeholder="Email" required="required"> <input type="password" id="upass" placeholder="Password" required="required"> <input type="password" id="cpassword" placeholder="Confirm password" required="required"> <div id="error_box"><br></div> <div class="input_box"> <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">立即注册</button><br> <button onclick=window.alert("重置") type="submit" class="btn btn-primary btn-block btn-large">取消</button> </div> </form> </div> </body> </html> 注册js function myLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var opassword = document.getElementById("upass"); var ocpassword=document.getElementById("cpassword"); if(oUname.value.length<6||oUname.value.length>12){ oError.innerHTML="用户名必须6-20字符"; 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; } } if(opassword.value.length<6||opassword.value.length>12){ oError.innerHTML="number of password6-12"; return; } else if (opassword.value!=ocpassword.value){ oError.innerHTML="密码不一致"; return; } window.alert("注册成功") } 注册css .box{ 500px; height:300px; border:solid 1px hotpink; background: greenyellow; position: absolute; text-align: center; font-family: "微软雅黑"; } .input_box{ 350px; padding-bottom: 15px; margin: 0 auto; overflow: hidden; }
