完成登录与注册页面的前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到登录界面,请登录</title> <script type="text/javascript" src="sdda.js"></script> <link rel="stylesheet" href="sdf.css"> </head> <body> <p id="meto">中国标准时间</p> <script>document.getElementById("meto").innerHTML = Date()</script> <div id="container" style="width: 300px" align="center"> <div id="header" style="background-color: yellow"><h2 align="center">登陆界面</h2></div> <div id="content" style="background-color: aqua"> <p align="center">用户名:<input id="uname" type="text" name="user" placeholder="请输入账号"> </p> <p align="center"> 密码 :<input id="upass" type="password" name="psw" placeholder="请输入密码"></p> <br> <div id="error_box"><br> </div> <input type="radio" value="stu">用户 <input type="radio" value="tea">会员 <br> <input type="checkbox" value="true">记住密码 <a href="">登陆遇到问题</a><br> <button onclick="fnLogin()">登陆</button>     <input type="button" name="regist" value="注册"> </div> <div id="footer" style="background-color: crimson"><h3 align="center">版权@hir</h3></div> </div> </body> </html>
1 function fnLogin() { 2 var oUname = document.getElementById("uname"); 3 var oError = document.getElementById("error-box"); 4 var oUpass = document.getElementById("upass"); 5 var oUpass = document.getElementById("upass1") 6 var isoError = true; 7 oError.innerHTML = "<br>"; 8 9 if (oUname.value.length<6||oUname.value.length>20){ 10 oError.innerHTML="用户名要6-20位"; 11 isoError = false; 12 return; 13 } 14 else if(oUname.value.charCodeAt(0)>=48&&(oUname.value.charCodeAt(0)<=57)){ 15 oError.innerHTML = "用户名首字母必须是字母"; 16 return; 17 } else for(var i=0;i<oUname.value.length;i++){ 18 if((oUname.value.charCodeAt(i)<48||oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97||oUname.value.charCodeAt(i)>122)){ 19 oError.innerHTML = "用户名必须为字母或数字"; 20 return; 21 } 22 } 23 24 25 if (oUpass.value.length<6||oUpass.value.length>20){ 26 oError.innerHTML="密码至少6-20位"; 27 isoError = false; 28 return; 29 30 } 31 window.alert("注册成功") 32 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册</title> 6 <script src="zhuce.js"></script> 7 </head> 8 <body> 9 <div class="box"> 10 <h1>注册</h1> 11 <div class="input-box"> 12 账号:<input id="uname" type="text" placeholder="请输入用户名"> 13 </div> 14 <div class="input-box"> 15 密码:<input id="upass" type="password" placeholder="请输入密码"> 16 </div> 17 <div class="input-box"> 18 密码:<input id="upass1" type="password" placeholder="请再次输入密码"> 19 </div> 20 <div id="error-box"><br></div> 21 <div class="input-box"> 22 <button onclick="fnLogin()">确认注册</button> 23 </div> 24 </div> 25 </body> 26 </html>
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 > 20 || oUname.value.length < 6) { oError.innerHTML = "用户名为6-20位字符"; return; } else if(oUname.value.charCodeAt(0)>=48 && oUname.value.charCodeAt(0)<=57){ oError.innerHTML="first letter"; 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="only letter or number"; return; } if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "密码为 6-20位字符"; return; } window.alert("登陆成功") }