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 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
webpack的移动端适配方案小结
Jul 25 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为php增加openssl模块的方法
2011/06/14 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Safari5中alert的无限循环BUG
2011/04/07 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python写入CSV文件的方法
2015/07/08 Python
python实现井字棋游戏
2020/03/30 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python 日期操作类代码
2018/05/05 Python
Python socket模块方法实现详解
2019/11/05 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
校园开放日新闻稿
2015/07/17 职场文书