輸入賬號 密碼 實現登錄功能
阿新 • • 發佈：2019-04-26
alt win black reg 頁面 div pos 直接 lse
當實現用戶的賬戶和密碼輸入正確之後，頁面跳轉 跳轉 使用window.loacation.href ="網址"，
這個時候 那個登錄的地方有個 賬號和密碼 這個是怎麽做到的呢？
現在有個方法是：
在輸入賬號和密碼的時候 ，當賬號和密碼都正確的時候，把這個兩個值都存在本地，然後轉到登錄進去的頁面的時候，
再在本地的緩存裏面取到這2個值，即可。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#top{
width:100%;
height:40px;
background-color:black;
text-align:right;
font-size:14px;
}
#top a{
color:white;
text-decoration:none;
line-height:40px;
vertical-align:middle;
margin-right:40px;
}
#login{
display:none;
margin-left:40px;
}
#login a{
display:block;
width:300px;
height:40px;
background-color:firebrick;
line-height:40px;
vertical-align: middle;
color:white;
text-decoration:none;
text-align:center;
}
input{
width:300px;
height:40px;
font-size:14px;
}
#login .name,.password,.bu{
margin-lfet:20px;
margin-top:15px;
}
a{
cursor:pointer;
}
</style>
<script src="jquery-1.10.2.min.js"></script>
<script src="layer/layer.js"></script>
<script>
function showLogin(){
layer.open({
type:1,//type為1表示彈出的是div
title:‘登陸‘,
area:[‘395px‘,‘300px‘],
content:$(‘#login‘)
});
}
function login(){
var userName= $.trim($(".userName").val());//trim用於去掉空格
var password= $.trim($(".password").val());
if(userName==" "||password==" "){
layer.alert("用戶名或密碼不能為空",{
title:‘提示‘,
icon:5
});
}else{
//輸入用戶名和密碼不為空
//ajax,第一個是傳到的後臺頁面，第二個參數是用戶名密碼，第三個參數是從後臺獲取的數據
$.post("/後臺頁面",{"userName":userName,"password":password},function(data){
//這個地方使用的是layer的彈出框 ，
不使用就可以直接跳轉到相應的頁面 在此之前，可以把2個值存到本地 即用戶名和密碼
window.location.href = "網址"
if(data=="登陸成功"){
layer.alert("登陸成功",{
title:‘提示‘,
icon:6
});
}else{
這個地方可以用到在輸入框下面把用戶名或者密碼錯誤顯示出來
當然這個地方可以用到正則，提示輸入的密碼符合怎麽規則，賬號是什麽規則等等 。
layer.alert("用戶名或密碼出錯",{
title:‘提示‘,
icon:5
});
}
});
}
}
</script>
</head>
<body>
<div id="top">
<a id="reg">註冊</a>
<a id="log" onclick="showLogin()">登陸</a>
</div>
<!--sql註入，利用SQL語句的漏洞來攻擊數據庫-->
<div id="login">
<div class="name">
<input type="text" class="userName" placeholder="請輸入用戶名">
</div>
<div class="password">
<input type="password" class="password" placeholder="請輸入密碼">
</div>
<div class="bu"><a onclick="login()">登陸</a></div>
</div>
</body>
</html>
輸入賬號 密碼 實現登錄功能