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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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正则表达式使用的详细介绍
2013/04/27 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python列表解析配合if else的方法
2018/06/23 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
小学班主任事迹材料
2014/12/17 职场文书
公司放假通知怎么写
2015/04/15 职场文书
预备党员转正意见
2015/06/01 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
研讨会致辞
2015/07/31 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL