js實現頁面記住密碼與自動登陸
<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
</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實現頁面記住密碼與自動登陸
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>統一認證平臺登入</title><
php實現記住密碼下次自動登陸
這篇部落格裡面還寫到 實現“記住我的登入狀態”的功能方法,簡言之,就是對首先對session進行使用者資訊賦值,檢測session,失效後,利用cookie對其賦值; 在實現過程中,根據網上一些程式碼貼,整理出以下程式碼:另外可以參考PHP 登入記住密碼實現思路 在登入login.ph
JS實現頁面載入完成之後自動重新整理一次
先貼出程式碼,如果有興趣看我解題思路的可以看下,沒興趣的直接拿走用,節省時間。 window.onload = function(){var url=document.location.href; //獲取瀏覽器訪問欄裡的地址
swipe.js實現支援手拔與自動切換的圖片輪播
一、Html程式碼如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div class='swipe-wrap'> <li style="no-repeat
Java使用SSM框架實現登錄頁面記住密碼功能
turn 頁面 賦值 ++ mage login ring 實現 member 最終效果展示: 1、登錄頁面JSP代碼 <label class="checkbox"> <input type="checkbox" name="remembe
js實現頁面開啟自動定位到指定元素位置
1.場景重現:我一個頁面很長很長,是分一個模組一個模組的,現在有需求是要求從特定場景進入頁面時,自動定位到第N個模組。 2.實現方法:第一步在需要展示的模組的最外層的元素上新增一個標記,可以是class 也可以是id。然後通過原生方法獲取到這個元
Android Studio運用MVP泛型登入與記住密碼,自動登入
一:獲取佈局控制元件 許可權 二:記住密碼與自動登入 mMobile.setText(sp.getString("mMobile","")); mPassword.setText(sp.getString("mPassword","")); 三:登入 1.建立Log
Android 記住密碼和自動登入介面的實現(SharedPreferences 的用法)
SharedPreferences介紹: SharedPreferences是Android平臺上一個輕量級的儲存類,主要是儲存一些常用的配置引數,它是採用xml檔案存放資料的,檔案存放在"/data/data<package name>/shared_pref
使用SharedPreferences實現記住密碼和自動登入
今天,來為大家分享一下通過SharedPreferences來實現QQ自動登入與記住密碼: SharedPreferences是一種輕型的資料儲存方式,它的本質是基於XML檔案儲存key-value鍵值對資料,通常用來儲存一些簡單的配置資訊。其儲存位置在/da
JAVA之登入頁面記住密碼之COOKIE實現
每次在進入登入頁面的時候都要進行使用者名稱和密碼的輸入,使用者的體驗不好。 使用cookie來實現記住密碼的功能。我實現的是邏輯比較簡單的記住密碼操作;並沒有涉及安全性比較高的業務;比如說與支付相關的密碼,例淘寶,基本上每次都需要自己重新輸入密碼。 首先梳理一下記住密碼的操
cookie、session及實現記住密碼,自動登入
在登入帳號、密碼框下,有三種帳號登入模式可供選擇,使用者可根據自己的具體情況選擇其中一種適合自己的模式。 1、網咖模式:勾選網咖模式後,登入的帳號會在歪歪登出/退出的時候自動清除,不會留在登入框中,可以保護自己的帳號不對外洩露,建議在外地上網時使用,比方網咖或者其他
php中實現記住密碼下次自動登入的例子
做網站的時候經常會碰到要實現記住密碼,下次自動登入,一週內免登陸,一個月內免登陸這種需求。這種功能一般都是通過cookie來實現的。本篇文章將簡單說一下如何使用php實現該需求的。當然實現該需求的方法有N多種。 整個過程就是使用者在登陸的時候,如果選擇了記住密碼或者一週內免
JS實現頁面復制文字時自動加版權
body java script ase 著作權 oca range navig strong 經親自實踐,嘗試了各種方法,目前可行的方法主要有如下兩種: 可以在任何運行使用js代碼的網站中使用,比如本人在自己的博客園博客中實現了一下,讀者您可親自在本人博客上測試。 方法1
如是使用JS實現頁面內容隨機顯示
js之前有個客戶咨詢我,因為他們公司的業務員有多個人,但公司網站的聯系方式板塊裏只夠放一個人的信息,所以就想能不能實現這個聯系方式信息隨機顯示,對於業務或客服人員來說也能做到分配均勻公平。本文我們將和大家一起分享,如何使用js控制實現頁面內容隨機顯示。這裏我以本地的蟬知建站系統為例,給大家演示一下實現流程。首
用wow.js實現頁面滾動時觸發animate.css動畫特效
偏移量 true fin 滾動 cdn lock src 代碼 splay 很高興在2017/10/14發表了自己的第一個博客隨筆,不管你們怎麽想,我自己覺得逼格瞬間高了起來。哈哈哈,哈撒尅。 有時候項目需要一些動畫來提升用戶體驗,吸引用戶註意力。這時wow是個
vue.js實現頁面倒計時跳轉功能
his 首頁 turn return () data col world mit 需求分析: 頁面倒計時5秒後進入系統主頁,數字需要實時更新! <template> <div class=""> <h1>歡迎來到Vue.js
用js實現頁面跳轉的幾種方式
head 註意 ont rem text pla http bsp cat 通過js或者html或者PHP等動態程序都可以方便的實現跳轉,這裏搜集了幾種頁面跳轉的方式js方式的頁面跳轉1.window.location.href方式 <script langua
JS實現段落的收縮與展開
fun bar ng- mov off lips -- 顯示行數 stat JS實現段落的收縮與展開 轉自 CSDN博客: 一只廢汪 原文地址:https://blog.csdn.net/carryworld/article/details/77258685
使用typed.js實現頁面上的寫字功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jq
JS實現頁面列印(整體、區域性)
我們在網頁開發過程中經常會有列印頁面的需求,通過JS來實現的方法有很多,這裡我做了一個整理,供大家參考。 方式一:window.print() 整體列印 ?