标签:html back lan ntb 页面 body cannot bit inpu
完成登录与注册页面的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="../untitled1/static/css/emm.css"> <script src="../untitled1/static/js/ojbk.js"></script> </head> <body> <div class="aa" > <div class="login" ><h2>LOGIN</h2></div> <div class="aa1" > Username:<input id="name" type="text"placeholder="请输入用户名"><br> Password:<input id="password" type="password"placeholder="请输入密码"><br> </div> <div id="error_box"><br></div> <div class="aa2" > <button onclick="myLogin()">Login</button> <button type="button" onclick=window.alert("是否取消登录!")>Cancel</button> </div> </body> </html>
div{ margin:0 auto; text-align:center; backgroup-color:blue } .aa{ width:380px; height:230px; background-color: gold; margin-top:200px; } .login{ font-size: 30px; color: black; font-family:幼圆; } .aa1{ font-size:30px; font-weight:bold; color: red; font-family:幼圆; } .aa2{ width:150px; height:60px; boder-style:hidden; } .design{ font-size:10px; color:yellowgreen; } #error_box{ color:red; }
function myLogin(){ var uName=document.getElementById("name"); var uError=document.getElementById("error_box"); var upass = document.getElementById("password"); uError.innerHTML = "<br>" //uname if(uName.value.length>12 || uName.value.length<6){ uError.innerHTML="Username 6-12 bits"; return; }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){ uError.innerHTML="The first letter cannot be numeric"; return; }else for(var i=0; i<uName.value.length;i++){ if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){ uError.innerHTML = "only letter or number."; return; } } if(upass.value.length>12 || upass.value.length<6){ uError.innerHTML="password 6-12 bits"; return; } window.alert("登陆成功 !") }
标签:html back lan ntb 页面 body cannot bit inpu
原文地址:http://www.cnblogs.com/marsk/p/7763864.html