您的位置:首页 > Web前端 > JQuery

jquery记住密码,记住账号,自动登录

2016-02-26 11:40 531 查看
1、引入jquery库

2、引入jquery.cookie.js库

3、引入操作js

jsp如下:

$(document).ready(function() {

//输入框获得焦点-失去焦点
$(".oaText").focus(function(){
oaFocus(".oaText","请输入用户名");
});
$(".oaText").blur(function(){
oaBlur(".oaText","请输入用户名");
});

//密码框获得焦点-失去焦点
$(".oaPwd").focus(function(){
oaFocus(".oaPwd","请输入密码");
});
$(".oaPwd").blur(function(){
oaBlur(".oaPwd","请输入密码");
});

$('.oaPwd').bind('input propertychange',function(){
if($(".oaPwd").val()==''){
$('.oaPwd')[0].type="text";
}else{
$('.oaPwd')[0].type="password";
}
})

//记住密码的同时记住账号
$("#oaRem_password").click(function(){
var remPassword = $("#oaRem_password").attr('checked');
if(remPassword){
$("#oaRem_account").attr('checked',true);
}
});
//根据cookie初始化form
var cookieAccount = $.cookie('Cxjava_account');
var cookiePassword = $.cookie('Cxjava_password');
// 账号
if (cookieAccount && cookieAccount != '') {
$('.oaText').val(cookieAccount);
$('#oaRem_account').attr('checked', true);

}
// 密码
if (cookiePassword && cookiePassword != '') {
$('.oaPwd').val(cookiePassword);
$('#oaRem_password').attr('checked', true);
}

//获得焦点事件;
function oaFocus(oaEle,oaDefVal){
$(oaEle).css("box-shadow","2px 2px 2px #bebebe");
textVal=$(oaEle).val();
if(textVal==oaDefVal){
$(oaEle).val("");
$(oaEle).css("color","#555");
}
}
//失去焦点事件
function oaBlur(oaEle,oaDefVal){
$(oaEle).css("box-shadow","none");
textVal=$(oaEle).val();
if(textVal==""){
$(oaEle).val(oaDefVal);
$(oaEle).css("color","#bebebe");
}else{$(oaEle).css("color","#555");}
}

Ext.ns("Ext.Authority.login");// 自定义命名空间
login = Ext.Authority.login;// 自定义命名空间别名
login = {
login : ctx + "/login",
main : ctx + "/main",
findpwd : ctx + "/findpwd",
register : ctx + "/register"
};
// 设置主题
//    Share.swapStyle('ext-all.css');
$('.oaLogin_btn').click(function() {
//function loginSubmit() {
var account = $(".oaText").val();
var passwordTxt = $(".oaPwd").val();
if (account == "" || password == "") {
Ext.Msg.alert('提示', '请输入用户名或密码');
} else {
// 用于从cookie中读取密码吗?
var cookiePassword = Ext.state.Manager.get('Cxjava_password');
// 判断cookie中的密码
var password =  MD5.hex_md5(passwordTxt);
Share.AjaxRequest({
url : login.login,
params : {
account : account,
password : password,
passwordTxt:passwordTxt
},
showMsg : false,
callback : function() {
// 设置cookie
var rememberAccount = $("#oaRem_account").attr('checked');
var rememberPassword = $("#oaRem_password")
.attr('checked');
//                    var autoLogin = $('#autoLogin').attr('checked');
if (rememberAccount) {
Ext.state.Manager.set('Cxjava_account', account);
} else {
Ext.state.Manager.set('Cxjava_account', '')
}

if (rememberPassword) {
Ext.state.Manager.set('Cxjava_password', passwordTxt);
} else {
Ext.state.Manager.set('Cxjava_password', '');
}

//                    if (autoLogin) {
//                        Ext.state.Manager.set('Cxjava_autoLogin', autoLogin);
//                    } else {
//                        Ext.state.Manager.set('Cxjava_autoLogin', '');
//                    }

Ext.state.Manager.set('Cxjava_hasLocked', false);
location.href = login.main;
},
falseFun : function(json) {
// 失败后想做的个性化操作
if (json.msg.indexOf('密码错误') > -1) {
$(".oaPwd").focus().val('');
return;
}
}
});
}
});

$("body").keydown(function(event) {
if (event.keyCode == "13") {// keyCode=13是回车键
$('.oaLogin_btn').click();
}
});

// 根据cookie初始化form
login.initLoginForm = function() {
// 取得cookie
var cookieAccount = Ext.state.Manager.get('Cxjava_account');
var cookiePassword = Ext.state.Manager.get('Cxjava_password');
var cookieAutoLogin = Ext.state.Manager.get('Cxjava_autoLogin');

// 账号
if (cookieAccount && cookieAccount != '') {
$('.oaText').val(cookieAccount);
$('#oaRem_account').attr('checked', true);

}

// 密码
if (cookiePassword && cookiePassword != '') {
$('.oaPwd').val(cookiePassword);
$('#oaRem_password').attr('checked', true);
}

// 自动登录

//        if (cookieAutoLogin && cookieAutoLogin != '') {
//
//            $('#autoLogin').attr('checked', true);
//            $('#onsubmit').click();
//        }
$('.oaText').focus();
//设置密码样式
if($(".oaPwd").val()==''){
$('.oaPwd')[0].type="text";
}else{
$('.oaPwd')[0].type="password";
}
}

// 根据cookie初始化form
login.initLoginForm();

// 窗口大小改变时,从新设置窗口位置
window.onrsize = function() {
var left = ($(windwo).width() - login.loginWindow.getWidth()) / 2;
}

// 设置为焦点
// 忘记密码
login.resetPassword = function() {
// 跳转到忘记密码
login.findPwdWindow = new Ext.Window({
title : '系统将发送重置密码链接到你的注册邮箱',
width : 300,
height : 190,
modal : true,
maximizable : false,
resizable : false,
layout : 'fit',
plain : true,
autoLoad : {
url : login.findpwd,
scripts : true,
nocache : true
}
}).show();
}

// 注册
login.register = function() {
// 跳转到注册
location.href = login.register;
}
//     监听事件
//    var events = "beforecopy beforepaste beforedrag contextmenu selectstart drag paste copy cut gragenter";
//    $("#account").bind(events, function(e) {
//                return false;
//            });
//    $("#password").bind(events, function(e) {
//                return false;
//            })
});


jsp如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<title><fmt:message key="login.title" /></title>
<%@ include file="/WEB-INF/views/commons/yepnope.jsp"%>
<script type="text/javascript">
yepnope("${ctx}/resources/js/login.js");
</script>
<link rel="stylesheet" type="text/css"
href="${ctx}/resources/css/oaLogin.css" />
</head>

<body>
<!--top-->
<div class="oaTop">
<div class="oaContain">
<img class="oaLogo" src="${ctx}/resources/images/oaLogo.png" />
<span class="oaTop_link">跳转到<a href="http://www.yunzainfo.com/">公司首页</a> </span>
</div>
</div>
<!--content-->
<div class="oaContain oaContent">
<img class="oaCont_img oaLeft" src="${ctx}/resources/images/oaImg.jpg" />
<img class="oaCont_sepLine" src="${ctx}/resources/images/sepeatLine.jpg" />
<div class="oaRight">
<h3 class="oaTitle">用户名登录 </h3>
<form>
<input class="oaInput oaText" type="text" placeholder="请输入用户名"/>
<input class="oaInput oaPwd" type="text" placeholder="请输入密码"/>
<p class="oaRelea_pwd">
<label class="oaLeft oaRem_pwd oaRem_account"><input type="checkbox" id="oaRem_account">记住账号    </label>
<label class="oaLeft oaRem_pwd oaRem_password"><input type="checkbox" id="oaRem_password">记住密码</label>
<a class="oaFoget_pwd" href="javascript:void(0)">忘记密码?</a>
</p>
<button type="button" class="oaLogin_btn">登录</button>

</form>
</div>
</div>
<!--copyRight-->
<img class="oaCp_bg" src="${ctx}/resources/images/bottomBg.png" />
<div class="oaCopyRight">
版权所有:
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: