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 相关文章推荐
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
多种方式实现js图片预览
Dec 12 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
详解node中创建服务进程
May 09 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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反射API的中文说明
2014/07/02 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python实现杨辉三角思路
2017/07/14 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python接入支付宝的实例操作
2020/07/20 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
幼师自我鉴定范文
2013/10/01 职场文书
《秋游》教学反思
2014/04/24 职场文书
委托书的写法
2014/08/30 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
学校党员干部承诺书
2015/05/04 职场文书
政协工作总结2015
2015/05/20 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python