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

Posted 2020-06-16

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">记住账号&nbsp;&nbsp;&nbsp;&nbsp;</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>