完成登录与注册页面的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/denglu1.1.css" type="text/css"> <script src="../static/JS/denglu1.1.js"></script> </head> <body style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">> <div class="box" > <h2 class="denglu">登录</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="uword" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">登录</button> </div> </div> </body> </html>
登录.CSS
.box{ border: 1px solid #cccccc; 334px; margin: 5px; text-align: center; } .denglu{ background-color: cornflowerblue; font-family: 华文楷体; font-size: 35px; } .input_box{ height: 40px; }
登录JS
function fnLogin() { var oUname = document.getElementById("uname") var oError = document.getElementById("error_box") var oUword = document.getElementById("uword") oError.innerHTML = "<br>" if (oUname.value.length < 6 || oUname.value.length > 12) { oError.innerHTML = "用户名为6到12位"; 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 ((oUword.value.length < 6) || (oUword.value.length > 20)) { oError.innerHTML = "密码为6到20位"; return } window.alert("登录成功!!") }
注册。HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <link rel="stylesheet" href="/static/css/zhuece.css" type="text/css"> <script src="/static/JS/zhuce.js"></script> </head> <body style="text-align: center"> <div class="box"> <h2 class="zhuce">注册</h2> <div class="input_box"> <input id="zcuname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="zcuword1" type="password" placeholder="请输入密码"> </div> <div class="input_box"> <input id="zcuword2" type="password" placeholder="请再次输入密码"> </div> <div id="zcerror_box"><br></div> <div class="input_box"> <button onclick="fnEnroll()">立即注册</button> </div> </div> </body> </html>
注册。CSS
.box{ border: 1px solid #cccccc; 334px; margin: 5px; text-align: center; } .zhuce{ font-family: "Bodoni MT Poster Compressed"; } .input_box{ height: 40px; }
注册。JS
function fnEnroll() { var zcoUname = document.getElementById("zcuname") var zcoError = document.getElementById("zcerror_box") var zcoUword1 = document.getElementById("zcuword1") var zcoUword2 = document.getElementById("zcuword2") zcoError.innerHTML = "<br>" if (zcoUname.value.length < 6 || zcoUname.value.length > 12) { zcoError.innerHTML = "用户名为6到12位"; return } else if( (zcoUname.value.charCodeAt(0) >= 48) && (zcoUname.value.charCodeAt(0) <= 57)){ zcoError.innerHTML = "用户名首位不能是数字"; return } else for (var i = 0; i < zcoUname.value.length; i++) { if ((zcoUname.value.charCodeAt(i) < 48) || (zcoUname.value.charCodeAt(i) > 57) && (zcoUname.value.charCodeAt(i) < 97) || (zcoUname.value.charCodeAt(i) > 122)) { zcoError.innerHTML = "用户名只能是字母与数字"; return } } if ((zcoUword1.value.length < 6) || (zcoUword1.value.length > 20)) { zcoError.innerHTML = "密码为6到20位"; return } if (zcoUword1.value()!=zcoUword2.value()){ zcoError.innerHTML="两次密码不一致" } window.alert("注册成功!!") }