js實現頁面記住密碼與自動登陸

阿新 • • 發佈：2019-01-25

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>統一認證平臺登入</title>
<link rel="shortcut icon" th:href="@{/images/favicon.png}" type="image/png">
<link rel="stylesheet" th:href="@{/css/reset.css}">
<link rel="stylesheet" th:href="@{/css/index2.css}">
<script th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/domlastic.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
domLastic.init({
itemsClassnameToConnect: 'item',
animationDirection:'vertical'
});
domLastic.animateItems();

});
</script>
<style type="text/css">
.passstyle{
display: block;
min-height: 15px;
height: auto;
_height: 14px;
padding: 18px 0 2px;
line-height: 14px;
font-size: 14.7px;
color: #fc4343;
text-align: left;
margin-left: 80px;
}

</style>
</head>
<body>
<div class="logo">
<img th:src="@{images/logo.png}" alt="">
</div>
<div class="login-box">
<form method="post" id="fm1" th:object="${credential}">
<div class="user-icon">
<img th:src="@{/images/Photo2.png}" alt="">
</div>
<input type="text" id="username" name="username" th:placeholder="#{screen.welcome.label.put.netid}" >
<input type="password" id="password" name="password" th:placeholder="#{screen.welcome.label.put.password}">
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<div class="passstyle item">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"> </span>
</div>
<button onclick="userLogin()" accesskey="l" >登入</button><br/>
<input type="checkbox" style="width:20px;height:20px" name="rememberMe" id = "rememberMe"> 記住密碼
</form>
</div>
<div class="foot">
主辦單位：XXX     

[email protected] XXX
</div>
</body>
<script th:src="@{/js/hendon/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script th:inline="javascript">

function addCookie(name,value,days,path){ /**新增設定cookie**/
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 3600000 * 24);
//path=/，表示cookie能在整個網站下使用，path=/temp，表示cookie只能在temp目錄下使用
path = path == "" ? "" : ";path=" + path;
//GMT(Greenwich Mean Time)是格林尼治平時，現在的標準時間，協調世界時是UTC
//引數days只能是數字型
var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}

function getCookieValue(name){ /**獲取cookie的值，根據cookie的鍵獲取值**/
//用處理字串的方式查詢到key對應value
var name = escape(name);
//讀cookie屬性，這將返回文件的所有cookie
var allcookies = document.cookie;
//查詢名為name的cookie的開始位置
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有該名字的cookie，那麼提取並使用它的值
if (pos != -1){ //如果pos值為-1則說明搜尋"version="失敗
var start = pos + name.length; //cookie值開始的位置
var end = allcookies.indexOf(";",start); //從cookie值開始的位置起搜尋第一個";"的位置,即cookie值結尾的位置
if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表裡只有一個cookie
var value = allcookies.substring(start,end); //提取cookie的值
return (value); //對它解碼
}else{ //搜尋失敗，返回空字串
return "";
}
}

function deleteCookie(name,path){ /**根據cookie的鍵，刪除cookie，其實就是設定其失效**/
var name = escape(name);
var expires = new Date(0);
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}

/**實現功能，儲存使用者的登入資訊到cookie中。當登入頁面被開啟時，就查詢cookie**/
window.onload = function(){
var userNameValue = getCookieValue("username");
if(userNameValue!='' && null!=userNameValue){
document.getElementById("username").value = userNameValue;
}
var userPassValue = getCookieValue("password");
if(userPassValue!='' && null!=userPassValue){
document.getElementById("password").value = userPassValue;
}
var check = getCookieValue("check");
if(check=='checked'){
document.getElementById("rememberMe").setAttribute("checked",true);
layer.msg('自動登陸中...', {
//icon: 1,
time: 3000
}, function(){
});
setTimeout(function () {
if (document.getElementById("rememberMe").checked) {
$("#fm1").submit();
}else{
deleteCookie("check","/");
layer.alert('您取消了記住密碼', {icon: 1});
}
},3000)
}
}

$("#rememberMe").click(function(){
if (document.getElementById("rememberMe").checked) {
var str_username = $("#username").val();//使用者名稱
var str_password = $("#password").val();//密碼
if(str_username!='' && str_password!=''){
addCookie("username", str_username,7,"/");
addCookie("password", str_password,7,"/");
deleteCookie("check","/");
addCookie("check", 'checked',7,"/");
}
}
else {
document.getElementById("rememberMe").removeAttribute("checked");
if(!getCookieValue("check").equals('') && null!=getCookieValue("check")){
deleteCookie("check","/");
}
}
});

//使用者登陸
function userLogin(){ /**使用者登入，其中需要判斷是否選擇記住密碼**/
//簡單驗證一下
var userName = document.getElementById("username").value;
var userPass = document.getElementById("password").value;

var objChk = document.getElementById("rememberMe");
if(userName!='' && userPass!=''){
if(objChk.checked){
//alert("記住了你的密碼登入。");
$("#fm1").submit();
}else{
//alert("不記密碼登入。");
$("#fm1").submit();
}
}else{
layer.alert('請填寫使用者資訊', {icon: 1});
}
}
</script>
<script>

</script>
</html>

js實現頁面記住密碼與自動登陸

js實現頁面記住密碼與自動登陸

php實現記住密碼下次自動登陸

JS實現頁面載入完成之後自動重新整理一次

swipe.js實現支援手拔與自動切換的圖片輪播

Java使用SSM框架實現登錄頁面記住密碼功能

js實現頁面開啟自動定位到指定元素位置

Android Studio運用MVP泛型登入與記住密碼，自動登入

Android 記住密碼和自動登入介面的實現（SharedPreferences 的用法）

使用SharedPreferences實現記住密碼和自動登入

JAVA之登入頁面記住密碼之COOKIE實現

cookie、session及實現記住密碼，自動登入

php中實現記住密碼下次自動登入的例子

JS實現頁面復制文字時自動加版權

如是使用JS實現頁面內容隨機顯示

用wow.js實現頁面滾動時觸發animate.css動畫特效

vue.js實現頁面倒計時跳轉功能

用js實現頁面跳轉的幾種方式

JS實現段落的收縮與展開

使用typed.js實現頁面上的寫字功能

JS實現頁面列印（整體、區域性）

js實現頁面記住密碼與自動登陸

相關推薦