JQuery记住用户名和密码的具体实现


Posted in Javascript onApril 04, 2014
<div> 
<input id="username" type="text" class="txt1" value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" /> 
<input id="password" type="text" class="txt2" value="请输入密码" onclick="if(this.value=='请输入密码'){this.value='';this.type='password';}" onfocus="if(this.value=='请输入密码'){this.value='';this.type='password';}"/> 
</div>

JQuery Code
$(document).ready(function(){ 
if ($.cookie("rmbUser") == "true") { 
$("#ck_rmbUser").prop("checked", true); 
$("#username").val($.cookie("username")); 
$("#password").remove(); 
$("#pass").append("<input id='password' type='password' class='txt2'/>"); 
$("#password").val($.cookie("password")); 
} 
$("#loginButton").click(function(){ 
if(check()){ 
login(); 
} 
}); 
}); 
//记住用户名密码 
function save() { 
if ($("#ck_rmbUser").prop("checked")) { 
var username = $("#username").val(); 
var password = $("#password").val(); 
$.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie 
$.cookie("username", username, { expires: 7 }); 
$.cookie("password", password, { expires: 7 }); 
}else{ 
$.cookie("rmbUser", "false", { expire: -1 }); 
$.cookie("username", "", { expires: -1 }); 
$.cookie("password", "", { expires: -1 }); 
} 
}; 
function check(){ 
var username = $("#username").val(); 
var password = $("#password").val(); 
if(username == "" || username == "请输入用户名"){ 
$("#tip").text("请输入用户名!"); 
$("#username").focus(); 
return false; 
} 
if(password == "" || password == "请输入密码"){ 
$("#tip").text("请输入密码!"); 
$("#password").focus(); 
return false; 
} 
$("#tip").text(""); 
return true; 
} 
function login(){ 
$.ajax({ 
type:"POST", 
url: "login!loginValidate.action", 
data:{userName:$("#username").val(),password:$("#password").val()}, 
dataType:"json", 
beforeSend: function(){ 
showOverlay(); 
}, 
success:function(data){ 
if(data.success){ 
addCookie("userName", $("#username").val(), 0); 
save(); 
location.href = "/index.jsp"; 
}else{ 
$("#overlay").hide(); 
$("#tip").text("用户名或密码错误,请重新登录!"); 
return false; 
} 
} 
}); 
}
Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
老生常谈的跨域处理
Jan 11 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 #Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 #Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 #Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 #Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 #Javascript
深入理解javascript的执行顺序
Apr 04 #Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 #Javascript
You might like
十天学会php之第七天
2006/10/09 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
javascript的事件描述
2006/09/08 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
Vue实现日历小插件
2019/06/26 Javascript
js实现聊天对话框
2020/02/08 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python中os.path用法分析
2015/01/15 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
详解Python编程中包的概念与管理
2015/10/16 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python实现在一个画布上画多个子图
2020/01/19 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
this关键字的作用
2016/01/30 面试题
老同学聚会感言
2014/02/23 职场文书
答谢会策划方案
2014/05/12 职场文书
初中团委工作总结
2015/08/13 职场文书
创业计划书之服装
2019/10/07 职场文书