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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
canvas 中如何实现物体的框选
Aug 05 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中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python3使用GUI统计代码量
2019/09/18 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python 合并拼接字符串的方法
2020/07/28 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
简历中自我评价怎么写
2014/02/12 职场文书
项目合作意向书范本
2014/04/01 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
校运会通讯稿
2015/07/18 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers