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 08 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
js的event详解。
2006/09/06 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python短信轰炸的代码
2020/03/25 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
大学生实习证明范本
2014/09/19 职场文书
青岛导游词
2015/02/12 职场文书
高中政治教学反思
2016/02/23 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
canvas绘制折线路径动画实现
2021/05/12 Javascript
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技