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 浮点运算的问题分析与解决方法
Aug 27 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 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上传图片客户端和服务器端实现方法
2015/03/30 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
新手简单了解vue
2019/05/29 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
pymongo中group by的操作方法教程
2019/03/22 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python进程池Pool应用实例分析
2019/11/27 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
大学生毕业自我评价范文分享
2013/11/07 职场文书
心得体会范文
2014/01/04 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
小学六一主持词开场白
2015/05/28 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript