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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
vue中使用echarts的示例
Jan 03 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
一篇不错的PHP基础学习笔记
2007/03/18 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python的pycurl包用法简介
2015/11/13 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
快餐公司创业计划书
2014/04/29 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
学校端午节活动总结
2015/02/11 职场文书
歌剧魅影观后感
2015/06/05 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server