完成登录与注册页面的前端
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>江南皮革厂</title> <link rel="stylesheet" type="text/css" href="./static/shabi/denglukuang.css"> <script> function fnLogin(){ var oUname=document.getElementById("uname"); var oUpass=document.getElementById("upass"); var oError=document.getElementById("error_box"); oError.innerHTML="<br>" if(oUname.value.length<6 || oUname.value.length>20){ 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 = "只能包含字母和数字"; } if(oUpass.value.length<6 || oUpass.value.length>20){ oError.innerHTML = "密码要6-20位" } if((oUname.value.length<6 || oUname.value.length>20) && (oUpass.value.length<6 || oUpass.value.length>20)){ oError.innerHTML = "用户名和密码都要6-20位" } } </script> </head> <body> <hr> <div class="bigdiv"> <div><h3>登录</h3></div> <div> 用户:<input id="uname" type="text" placeholder="用户名"> </div> <div> 密码:<input id="upass" type="password" placeholder="密码"><br> </div> <div id="error_box"><br></div> <div> <button class="button" onclick="fnLogin()">登录</button> <button class="button">注册</button> </div> <div><h6>版权归江南皮革厂所有</h6></div> <p>如有疑问可联系小梁:13711269544</p> </div> </body> </html>
注册界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>江南皮革厂</title> <link rel="stylesheet" type="text/css" href="./static/shabi/denglukuang.css"> <script> function fnLogin(){ var oUname=document.getElementById("uname"); var oUpass=document.getElementById("upass"); var oUpass=document.getElementById("upasss"); var oError=document.getElementById("error_box"); oError.innerHTML="<br>" if(oUname.value.length<6 || oUname.value.length>20){ 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 = "只能包含字母和数字"; } if(oUpass.value.length<6 || oUpass.value.length>20){ oError.innerHTML = "密码要6-20位"; return; } if((oUname.value.length<6 || oUname.value.length>20) && (oUpass.value.length<6 || oUpass.value.length>20)){ oError.innerHTML = "用户名和密码都要6-20位"; return; } if(upass!=upasss){ document.getElementById("error_box").innerHTML="两次密码不一致"; return; } } </script> </head> <body> <hr> <div class="bigdiv"> <div><h3>新用户</h3></div> <div> 用户:<input id="uname" type="text" placeholder="用户名"> </div> <div> 密码:<input id="upass" type="password" placeholder="密码"><br> </div> <div> 密码:<input id="upasss" type="password" placeholder="再次输入密码"><br> </div> <div id="error_box"><br></div> <div> <button class="button" onclick="fnLogin()">注册</button> </div> <div><h6>版权归江南皮革厂所有</h6></div> <p>如有疑问可联系小梁:13711269544</p> </div> </body> </html>