1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 登录界面—记住用户名和密码

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

时间:2018-12-04 07:14:18

相关推荐

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

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

第一部分:文本框

<formid="login"name="login"action="login"method="post">

<divclass="header">

<h2class="logo png">

<ahref=""target="_blank"></a>

</h2><spanclass="alt"></span></div>

<ul>

<li><label>用户名</label><inputid="name"name="user.name"class="easyui-textbox"/></li>

<li><label>密 码</label><inputid="pwd"name="user.password"class="easyui-textbox"type="password"</li>

<liclass="submits"><inputtype="checkbox"id="checkpwd"/><fontsize="-2"color="#999999">记住用户和密码</font><inputid="btn"class="submit"type="submit"OnClick="userLogin()"value="登录"/</li>

</ul>

</form>

第二部分:核心代码

<scriptlanguage="javascript"type="text/javascript">

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

$.messager.alert("info", "用户名或密码错误,请重新登录!!!");

$("#name").textbox('setValue',"");

$("#pwd").textbox('setValue',"");

}

functionaddCookie(name, value, days, path) {

//添加设置cooki

varname = escape(name);

varvalue = escape(value);

varexpires =newDate();

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 = (typeofdays) == "string"? "": ";expires="

+ expires.toUTCString();

document.cookie = name + "="+ value + _expires + path;

}

//获取cookie的值,根据cookie的键获取值

functiongetCookieValue(name) { //此处name是 userName,userPass

//用处理字符串的方式查找到key对应value

varname = escape(name);

//读cookie属性,这将返回文档的所有cookie

varallcookies = document.cookie;

//查找名为name的cookie的开始位置

name += "=";

varpos = allcookies.indexOf(name);

//如果找到了具有该名字的cookie,那么提取并使用它的值

if(pos != -1) { //如果pos值为-1则说明搜索"version="失败

varstart = pos + name.length; //cookie值开始的位置

varend = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置

if(end == -1)

end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie

varvalue = allcookies.substring(start, end); //提取cookie的值

return(value); //对它解码

}else{ //搜索失败,返回空字符串

return"";

}

}

functiondeleteCookie(name, path) {

//根据cookie的键,删除cookie,其实就是设置其失效

varname = escape(name);

varexpires = 0;

alert(expires)

path = path == ""? "": ";path="+ path;

document.cookie = name + "="+ ";expires="

+ expires.toUTCString() + path;

}

functionuserLogin() {

//用户登录,其中需要判断是否选择记住密码

//简单验证一下

varuserName = document.getElementById("name").value;

if(userName == '') {

alert("请输入用户名。");

return;

}

varuserPass = document.getElementById("pwd").value;

if(userPass == '') {

alert("请输入密码。");

return;

}

varobjChk = document.getElementById("checkpwd");

if(objChk.checked) {

//添加cookie

addCookie("userName", userName, 30, "/");

addCookie("userPass", userPass, 30, "/");

//alert("记住了你的密码登录。");

getCookieValue();

// window.location.href = "";

}else{

//alert("不记密码登录。");

addCookie("userName", userName, 0, "/");

addCookie("userPass", userPass, 0, "/");

deleteCookie();

// window.location.href = "";

}

}

//实现功能,保存用户的登录信息到cookie中。当登录页面被打开时,就查询cookie

window.onload =function() {

varuserNameValue = getCookieValue("userName");

//document.getElementById("name").value = userNameValue; //取出cookies的name赋给文本框

$("#name").textbox('setValue',userNameValue);

varuserPassValue = getCookieValue("userPass");

//document.getElementById("pwd").value = userPassValue;

$("#pwd").textbox('setValue',userPassValue);

//alert(" "+document.getElementById("name").value+" "+userPassValue);

}

</script>

第三部分:css样式

<scripttype="text/javascript">

$(function(){

//定义最小长度

$.extend($.fn.textbox.defaults.rules, {

minLength: {

validator:function(value, param){

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。