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 Math对象
Aug 13 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
jQuery事件对象总结
Oct 17 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
vue 自定义组件添加原生事件
Apr 21 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
php 远程关机操作的代码
2008/12/05 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python 将pdf转成图片的方法
2018/04/23 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python实现在线翻译
2020/06/18 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
《世界多美呀》教学反思
2014/03/02 职场文书
职业生涯规划书范文
2014/03/10 职场文书
高一学生期末评语
2014/04/25 职场文书
开幕式邀请函
2015/01/31 职场文书
教师个人培训总结
2015/02/11 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技