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中的立即执行函数(function(){…})()
Jun 12 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
ES6基础之默认参数值
Feb 21 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
JS回调函数深入理解
Oct 16 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
javascript实现微信分享
2014/12/23 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python中__slots__用法实例
2015/06/04 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
促销活动总结
2014/04/28 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
检讨书格式范文
2015/05/07 职场文书
北京爱情故事观后感
2015/06/12 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB