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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
javascript继承机制实例详解
Nov 20 Javascript
javascript如何写热点图
Dec 08 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
js实现显示手机号码效果
Mar 09 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 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
第十三节--对象串行化
2006/11/16 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
Prototype Function对象 学习
2009/07/12 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python兔子毒药问题实例分析
2015/03/05 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
使用python实现ANN
2017/12/20 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
法制宣传实施方案
2014/03/13 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
学术研讨会主持词
2015/07/04 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
Java 定时任务技术趋势简介
2022/05/04 Java/Android