當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）
生活随笔
收集整理的這篇文章主要介紹了
2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//HTML部分
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>登錄頁面</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>
</head>
<body>
<div id="login">
<div id="login_logo">
<img src="img/logo_login.png"/>
</div>
<div id="login_text">
<span class="login_text">登錄</span> <span class="login_text2">還沒有賬號？<a href="#">注冊</a></span>
</div>
<form action="#" id="form">
<img src="img/register_01.png" class="register"><input type="text" name="" id="user" value="">
<div id="usererror">用戶名不可以用數字開頭</div>
<div id="userlength">用戶名在6到20位之間</div>
<img src="img/register_02.png" class="register"><input type="password" name="" id="password" value="">
<div id="passworderror">密碼不能為空</div>
驗證碼<input type="" name="" id="code" value="" ><img src="img/code_img.jpg" class="code_img"><br/>
<input type="checkbox" name="" id="checkbox" value="" >記住我
<input type="submit" value="登錄"id="sub">
</form>
<div id="btn">X</div>
<div class="others_login_text">
使用第三方賬號登錄
</div>
<div id="otherslogin">
<a href="http://weibo.com"><img src="img/login_sina.png" alt=""></a>
<a href="https://im.qq.com"><img src="img/login_qq.png" alt=""></a>
<a href="https://wx.qq.com"><img src="img/login_dou.png" alt=""></a>
</div>
</div>
<div id="shadow"><img src="img/admin-bg.jpg" alt=""></div>
</body>
</html>
//JavaScript部分
window.onload =function(){ var username=document.getElementById("user");
var pass=document.getElementById("password");
username.οnblur=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.οnblur=function(){
var passvalue=pass.value;
if (passvalue.length==0 || pass.value==null) {
passworderror.style.display="inline-block";
}
}
} //Jquery部分 $(function () {
//獲取窗口的可視區域
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({//為login設置居中位置
"left":((window_view_w-580)/2)+"px",
"top":((window_view_h-660)/2)+"px"
}
);
$(window).resize(function () { //頁面重置時
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();
})
}) //效果圖
轉載于:https://www.cnblogs.com/YoogaChan/p/6832285.html
總結
以上是生活随笔為你收集整理的2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7映射网络驱动器消失了_win7系
- 下一篇： JS代码优化工具Prepack