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 相关文章推荐
jQuery 渐变下拉菜单
Dec 15 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
实例讲解PHP表单
2020/06/10 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 第一步 hello world
2009/09/25 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
wxPython实现画图板
2020/08/27 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
Prototype如何更新局部页面
2013/03/03 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
岗位职责的构建方法
2014/02/01 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
《秋游》教学反思
2014/04/24 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
工会趣味活动方案
2014/08/18 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书