HTML section
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Login Page </title>
<link rel= "stylesheet" type= "Text/css" href= "Css/login.css"/>
<script src= "Https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script src= "Js/login2.js" ></script>
<script src= "Js/login.js" ></script>
<body>
<div id= "Login" >
<div id= "Login_logo" >
</div>
<div id= "Login_text" >
<span class= "Login_text" > Login </span> <span class= "Login_text2" > No account yet? <a href= "#" > Registration </a></span>
</div>
<form action= "#" id= "form" >
<input type= "text" name= "" id= "User" value= "" >
<div id= "Usererror" > Username can not start with a number </div>
<div id= "Userlength" > Username between 6 and 20 bits </div>
<input type= "password" name= "" id= "password" value= "" >
<div id= "Passworderror" > Password cannot be empty </div>
Captcha <input type= "" Name= "" id= "Code" value= "" ><br/>
<input type= "checkbox" Name= "id=" checkbox "Value=" "> Remember Me
<input type= "Submit" value= "Login" id= "sub" >
</form>
<div id= "BTN" >X</div>
<div class= "Others_login_text" >
Sign in with a third-party account
</div>
<div id= "Otherslogin" >
<a href= "http://weibo.com" ></a>
<a href= "https://im.qq.com" ></a>
<a href= "https://wx.qq.com" ></a>
</div>
</div>
<div id= "Shadow" ></div>
</body>
//javascript Part
window.onload =function () {
var Username=document.getelementbyid ("User");
var Pass=document.getelementbyid ("password");
Username.onblur=function () {
var uservalue = Username.value;
var userlength = document.getElementById ("Userlength");
var usererror = document.getElementById ("Usererror");
if (uservalue[0]<=9 && uservalue[0]>=0) {
Usererror.style.display= "Inline-block";
}
if (! ( Uservalue.length>=6 && uservalue.length<=20)) {
Userlength.style.display= "Inline-block";
}
}
Pass.onblur=function () {
var Passvalue=pass.value;
if (passvalue.length==0 | | pass.value==null) {
Passworderror.style.display= "Inline-block";
}
}
}
jquery section
$ (function () {
Get the viewable area of a window
var window_view_h = document.body.clientheight| | document.documentelement.clientheight| | Window.innerheight;
var window_view_w = document.body.clientwidth| | document.documentelement.clientwidth| | Window.innerwidth;
$ ("#login"). CSS ({//center position for login setting
"Left":((window_view_w-580)/2) + "px",
"Top":((window_view_h-660)/2) + "px"
}
);
$ (window). Resize (function () {//page reset
var window_view_h = document.body.clientheight| | document.documentelement.clientheight| | Window.innerheight;
var window_view_w = document.body.clientwidth| | document.documentelement.clientwidth| | Window.innerwidth;
$ ("#login"). CSS ({
"Left": ((window_view_w-580)/2) + "px",
"Top": ((window_view_h-660)/2) + "px"
}
);
})
$ ("#btn"). Click (function () {
$ ("#shadow"). Hide ();
$ ("#login"). Hide ();
})
})
//
2. Easy login page (form verification) (Html+javascript+jquery)