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 精粹笔记
May 09 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
javascript生成随机数的方法
May 16 Javascript
webpack3之loader全解析
Oct 26 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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
各种战术和打法的原创者
2020/03/04 星际争霸
1.PHP简介
2006/10/09 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
JS设计模式之单例模式(一)
2017/09/29 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
django Admin文档生成器使用详解
2019/07/22 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
django实现用户注册实例讲解
2019/10/30 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
仓库保管员岗位职责
2013/12/20 职场文书
老师自我鉴定范文
2013/12/25 职场文书
房屋委托书范本
2014/04/04 职场文书
安全责任书模板
2014/07/22 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
大学体育课感想
2015/08/10 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
python 网络编程要点总结
2021/06/18 Python