登入介面—記住使用者名稱和密碼
每次登入都需要輸入完整的帳號與密碼，那麼可以設定記住密碼，再次登入一點即可！ 程式碼如下:
第一部分：文字框
<form id="login" name="login" action="login" method="post">
<div class="header">
<h2 class="logo png">
<a href="http://www.soarocean.com" target="_blank"></a>
</h2><span class="alt"></span></div>
<ul>
<li><label>使用者名稱</label><input id="name" name="user.name" class="easyui-textbox" /></li>
<li><label>密 碼</label><input id="pwd" name="user.password" class="easyui-textbox" type="password"</li>
<li class="submits"><input type="checkbox"
</ul>
</form>
第二部分：核心程式碼
<script language="javascript" type="text/javascript">
if (<%=request.getSession().getAttribute("flag"
$.messager.alert("info", "使用者名稱或密碼錯誤，請重新登入！！！");
$("#name").textbox('setValue',"");
$("#pwd").textbox('setValue',"");
}
function addCookie(name, value, days, path) {
//新增設定cooki
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;
}
//獲取cookie的值，根據cookie的鍵獲取值
function getCookieValue(name) { //此處name是 userName,userPass
//用處理字串的方式查詢到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 = 0;
alert(expires)
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "=" + ";expires="
+ expires.toUTCString() + path;
}
function userLogin() {
//使用者登入，其中需要判斷是否選擇記住密碼
//簡單驗證一下
var userName = document.getElementById("name").value;
if (userName == '') {
alert("請輸入使用者名稱。");
return;
}
var userPass = document.getElementById("pwd").value;
if (userPass == '') {
alert("請輸入密碼。");
return;
}
var objChk = document.getElementById("checkpwd");
if (objChk.checked) {
//新增cookie
addCookie("userName", userName, 30, "/");
addCookie("userPass", userPass, 30, "/");
//alert("記住了你的密碼登入。");
getCookieValue();
// window.location.href = "http://www.baidu.com";
} else {
//alert("不記密碼登入。");
addCookie("userName", userName, 0, "/");
addCookie("userPass", userPass, 0, "/");
deleteCookie();
// window.location.href = "http://www.baidu.com";
}
}
//實現功能，儲存使用者的登入資訊到cookie中。當登入頁面被開啟時，就查詢cookie
window.onload = function() {
var userNameValue = getCookieValue("userName");
//document.getElementById("name").value = userNameValue; //取出cookies的name賦給文字框
$("#name").textbox('setValue',userNameValue);
var userPassValue = getCookieValue("userPass");
//document.getElementById("pwd").value = userPassValue;
$("#pwd").textbox('setValue',userPassValue);
//alert(" "+document.getElementById("name").value+" "+userPassValue);
}
</script>
第三部分：css樣式
<script type="text/javascript">
$(function(){
//定義最小長度
$.extend($.fn.textbox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: '請輸入至少 {0}個字元.'
}
});
$('#name').textbox({
width:190,
height:24,
required:true,
validType:'minLength[0]',
delay:600,
missingMessage:"該項不允許為空！",
invalidMessage:"請重新輸入使用者名稱！",
prompt:'使用者名稱',
iconCls:'icon-man',
iconWidth:38
});
$("#pwd").textbox({
width:190,
height:24,
required:true,
delay:1000,
validType:'minLength[5]',
missingMessage:"該項不允許為空！",
prompt:'登入密碼',
iconCls:'icon-lock',
iconWidth:38
});
});
</script>
備註：
使用者登入，其中需要判斷是否選擇記住密碼
輸入完成以後判斷使用者名稱密碼是否正確，正確的話就新增設定其相應cookies，設定時間為30天
輸入的使用者名稱密碼不合格但選擇了記住密碼時，直接呼叫deletecookies方法不起作用
並且是當前輸入錯誤資訊也被快取了
新增設定相應的cookies，給其時間設定為0天，建立即過期。
否則是當前使用者名稱密碼沒記住，但之後的每次登入獲取的都是上一次快取在cookies裡面的資料
.使用者名稱密碼的文字框的屬性 class="easyui-textbox" / css樣式 $('#name').textbox({ })
和 取值方式 document.getElementById("name").value;同時使用時
會導致cookies中取出來的值無法顯示在文字框，但是可以從文字框的alue中取到值
正確的做法是： $("#pwd").textbox('setValue',userPassValue);通過這種方式給文字框中賦值
讓記住的使用者名稱和密碼顯示在文字框中