登录界面—记住用户名和密码

每次登录都需要输入完整的帐号与密码，那么可以设置记住密码，再次登录一点即可！ 代码如下:

第一部分：文本框

<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" id="checkpwd" /> <fontsize="-2" color="#999999">记住用户和密码</font>   <input id="btn" class="submit" type="submit"  OnClick="userLogin()" value="登录" /</li>

</ul>

</form>

 

 

第二部分：核心代码

<script language="javascript" type="text/javascript">

if (<%=request.getSession().getAttribute("flag")%>== "1") {

$.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);通过这种方式给文本框中赋值

  让记住的用户名和密码显示在文本框中