完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：
用户名6-12位
首字母不能是数字
只能包含字母和数字
密码6-12位
注册页两次密码是否一致
登录界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/nino.css"> <script src="../static/js/aiba.js"></script> </head> <body> <div class="box"> <h2>登录</h2> <div class="input_box"> <input id="uname" class="sign" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="upass" class="sign" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br> </div> <div class="input_box"> <input type="submit" name="commit" value="登录" class="sign-in-button" data-disable-with="登录" onclick="myLogin()"> </div> </div> </div> </body> </html>
注册界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/css/nino.css"> <script src="../static/js/aiba.js"></script> </head> <body> <div class="box"> <h2>注册</h2> <div class="input_box"> <input id="uname" class="sign" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="upass" class="sign" type="password" placeholder="请输入密码"> </div> <div class="input_box"> <input id="upas" class="sign" type="password" placeholder="请再输入一次密码"> </div> <div id="error_box"><br> </div> <div class="input_box"> <input type="submit" name="commit" value="注册" class="sign-in-button" data-disable-with="注册" onclick="myLogin()"> </div> </div> </div> </body> </html>
css文件
h2{ text-align: center; color:#3194d0; font-size: 20px; } .sign{ width: 100%; height: 50px; margin-bottom: 0; vertical-align: middle; } .box{ width: 300px; height: 155px; margin-left: 450px; margin-top: 150px; } .sign-in-button{ width: 100%; padding: 9px 18px; font-size: 18px; border: none; border-radius: 25px; color: #fff; background: #3194d0; cursor: pointer; outline: none; display: block; clear: both; }
js文件
function myLogin() { var oUname=document.getElementById("uname") var oPass=document.getElementById("upass") var oPas=document.getElementById("upas") var oError=document.getElementById("error_box") oError.innerHTML="<br>" if(oUname.value.length<6||oUname.value.length>20){ oError.innerHTML='请输入6-20位的用户名' return; }else for(var i=0;i<oUname.value.length;i++){ if(oUname.value.charCodeAt(i)>=48||oUname.value.charCodeAt(i)<=57){ oError.innerHTML='请输入合法字符' } return; } if(oUname.value.charCodeAt(0)>=48&&oUname.value.charCodeAt(0)<=57){ oError.innerHTML='首字母不能为数字' return; } if(oPas.value!=oPass.value){ oError.innerHTML='密码输入不正确' } if(oPass.value.length<6||oPass.value.length>20){ oError.innerHTML='请输入6-20位的密码' return; } }
效果：
