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 加号(+)运算符号
Dec 06 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 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
基于Zookeeper的使用详解
2013/05/02 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
浅析vue-router原理
2018/10/19 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
python里glob模块知识点总结
2021/01/05 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
环保倡议书100字
2014/05/15 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android