记住密码

1.一般在用户登录的界面会有记住密码功能

2.html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>运营登录界面</title>
    <link href="../css/login.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="bj"></div>
<div class="container login_BG">
    <div class="box">
        <div class="logo">
            <img src="../images/LOGO.png"/>
            <p>用户登入</p>
        </div>
    </div>
    <div class="login_box_wrap">
        <div class="login_form_box">
            <form id="ajaxForm" method="post" action="">
                <div class="field username_field">
                    <label class="username_icon"><img src="../images/login_name.png"/></label>
                    <input id="usertxt" name="username" type="text" placeholder="请输入员工编号"/>
                </div>
                <div class="field password_field">
                    <label class="password_icon"><img src="../images/login_pwd.png"/></label>
                    <input id="pwdtxt" class="txt2" name="password" type="password" placeholder="请输入密码"/>
                </div>
                <div class="rember_pwd">
                    <input id="saveid" type="checkbox" value=""/><span>下次记住我</span>
                    <a href="##">忘记密码？</a>
                </div>
                <div class="login_bt">
                    <a href="##">登录</a>
                </div>
            </form>
        </div>
    </div>
    <div class="Error_prompt">
        <span>该用户不存在或密码错误，请更换账户。</span>
    </div>
    <div class="footer">Copyright © 2016 矩阵魔方信息技术有公司所有权保留/京ICP备15000365号-2</div>
</div>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.cookie.js" type="text/javascript"></script>
<script src="../js/login.js" type="text/javascript" charset="gbk"></script>
</body>
</html>

2.css

*{
    margin: 0;
    padding: 0;
}
body,html{
    font-family: "Microsoft YaHei";
    /*删除下面部分代码1*/
    /*background: url("../images/background.png");*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
    /*background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-webkit-background-size: cover;*/
    /*width: 100%;*/
    /*height: 100%;*/
}
/*修改内容开始2*/
#bj{
    position: fixed;
    background: url("../images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    width: 100%;
    height: 100%;
}
/*修改内容结束*/
.container{
    position: relative;
    /*删除下面部分代码3*/
    /*min-width: 1200px;*/
}
.box{
    background-color: #393f4d;
}
.logo{
    /*删除下面部分代码4*/
    /*width: 1200px;*/
    height: 275px;
    margin: 0 auto;
    /* 删除这部分5
    text-align: center; /!*IE*!/
    text-align: -moz-center; /!*Firefox*!/
    text-align: -webkit-center; /!*Chrome*!/
    */
    font-size: 0;
}
.logo img{
    /*修改内容开始6*/
    position: relative;
    left: 50%;
    margin-left: -107.5px;
    /*修改内容结束*/
    width: 215px;
    height: 123px;
    margin-top: 62px;
}
.logo p{
    font-size: 24px;
    color: #ffffff;
    margin-top: 34px;
    /*修改内容开始7*/
    width: 96px;
    position: relative;
    left: 50%;
    margin-left: -48px;
    /*修改内容结束*/
}
.login_box_wrap{
   /* display: none;*/
    position: absolute;
    left: 50%;
    margin-left: -267px;
    width: 534px;
    /*height: 394px;*/
    background-color: #252525;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    border-radius: 12px;
    background: transparent;
}
.login_box_wrap .login_title{
    height: 30px;
    line-height: 30px;
    font-size: 26px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 28px;
    margin-bottom: 32px;
}
.login_form_box{
    margin-top: 36px;
}
.login_form_box .field {
    position: relative;
    margin-bottom: 20px;
}
.field label{
    display: block;
    width: 50px;
    height: 56px;
    background-color: #fe9b31;
    margin-left: 60px;
}
.field label img{
    padding: 10px 10px;
}
.field input{
    position: absolute;
    left: 110px;
    top: 0;
    width: 328px;
    height: 20px;
    line-height: 20px;
    padding: 18px 20px;
    background-color: #e2e2e2;
    border: 0px;
    outline: none;
    font-size: 18px;
    color: #898989;
}

.rember_pwd{
    color: #58bbee;
    height: 15px;
    line-height: 15px;
    font-size: 16px;
    margin-bottom: 40px;
}
.rember_pwd input{
    width: 16px;
    height: 16px;
    margin: 0px 14px 0 60px;
    outline: none;
}
.rember_pwd span{
    vertical-align: top;
}
.rember_pwd a{
    text-decoration: none;
    color: #de3837;
    float: right;
    margin-right: 57px;
}

.login_bt{
    text-align: center;
}
.login_bt a{
    display: inline-block;
    text-decoration: none;
    width: 418px;
    height: 56px;
    line-height: 56px;
    font-size: 22px;
    color: #FFFFFF;
    background-color: #fe9b31;
}
.Error_prompt{
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -209px;
    margin-top: 335px;
    width: 418px;
    height: 56px;
    line-height: 56px;
    background-color: #feeba5;
    color: #ff0f0f;
    text-align: center;
    border-radius: 6px;
}
.footer{
    position: absolute;
    margin-bottom: 40px;
    color: #a6a6a8;
    font-size: 16px;
    left: 50%;
    margin-left: -285px;
    margin-top: 618px;
}

View Code

3.js部分

/**
 * Created by Administrator on 2017/3/27.
 */
$(function () {
    //点击登陆按钮时进行的判断
    $(".login_bt").on("click", function () {
        if ($("#usertxt").val() == "" || $("#pwdtxt").val() == "") {
            $(".Error_prompt").fadeIn(800).html("员工编号或密码不能为空！");
            return false;
        } else {
            $(".Error_prompt").fadeOut(400);
            //前端初步判断数据类型成功以后像后台发出请求来判断登陆是否成功
            $.ajax({
                type: "post",
                url: "data.json",//这里的data.json 是我模拟的一个json文件名。url放的是当前页面请求的后台地址。
                dataType: "json",
                data: $('#ajaxForm').serialize(),
                success: function (data) {
                    //记住密码部分内容1开始
                    var result = data.result;
                    //用户名和密码校验错误
                    if (result == "0") {//后台验证登录失败，提示
                        $(".Error_prompt").fadeIn(800).html("该用户不存在或密码错误");
                        $(".Error_prompt").fadeIn("fast", "linear");

                    }else{//校验成功
                        var ifSaveId = $("#saveid").prop("checked");//是否记住密码
                        if(ifSaveId){
                            $.cookie("userName",$("#usertxt").val(), {expires: 7});
                            var pwd = $("#pwdtxt").val();
                            console.log("登录密码明文："+pwd);
                            var enPwd = btoa(pwd);
                            console.log("登录密码密文："+enPwd);
                            $.cookie("passWord",enPwd, {expires: 7});
                        }
                    }
                    //记住密码部分内容1结束
                },
                error: function () {
                    alert("请求失败！");
                }
            });
        }
    });
});

//记住密码部分内容2开始
//初始化页面时验证是否记住了密码
$(document).ready(function () {
    if ($.cookie("saveid") == "true") {//如果之前用户点击记住密码，那么自动补全用户名和密码
        $("#saveid").attr("checked", true);
        $("#usertxt").val($.cookie("userName"));
        var pwd = $.cookie("passWord");
        console.log("自动补全密文："+pwd);
        var dePwd = atob(pwd);
        console.log("自动补全解密："+dePwd);
        $("#pwdtxt").val(dePwd);
    }else{//如果没有点击记住密码，则不自动补全登录信息
        $("#saveid").attr("checked", false);
    }
});
//记住密码checkbox改变处理
$("#saveid").change(function(){
    var flag = $(this).prop("checked");
    if(flag){
        $.cookie("saveid", "true", {expires: 7});
    }else{
        $.cookie("saveid", "");
    }
});
//记住密码部分内容2结束

//校验用户名不为空和长度
/*$("input[name='username']").blur(function () {
    var value = $(this).val();
    if (value == "" || value == null || value == undefined) {
        $(".Error_prompt>span").text("请输入员工编号");
        $(".Error_prompt").fadeIn("fast", "linear");
        return;
    } else {
        $(".Error_prompt").fadeOut("fast", "linear");
    }
});*/

//校验密码不为空和长度
/*$("input[name='password']").blur(function () {
    var value = $(this).val();
    if (value == "" || value == null || value == undefined) {
        $(".Error_prompt>span").text("请输入密码");
        $(".Error_prompt").fadeIn("fast", "linear");
        return;
    } else {
        $(".Error_prompt").fadeOut("fast", "linear");
    }
});*/


//后台用户名密码校验 方法一：
/*var user = $("input[name='username']").val();
 var pwd = $("input[name='password']").val();
 $(".login_bt").click(function () {
 $.post("data.json", {username: user, password: pwd}, function (data) {
 var result = data.result;
 //用户名和密码校验错误
 if (result == "0") {
 $(".Error_prompt>span").text("该用户不存在或密码错误");
 $(".Error_prompt").fadeIn("fast", "linear");
 }
 });
 });*/

//后台用户名密码校验 方法二：
/*var user = $("input[name='username']").val();
 var pwd = $("input[name='password']").val();
 $(".login_bt").click(function () {
 $.ajax({
 type: "post",
 url: "data.json",//这里的data.json 是我模拟的一个json文件名。url放的是当前页面请求的后台地址。
 data: {username: user, password: pwd},//发送给后台的数据
 success: function (Msg) {//Msg后台返回的json数据
 var result = data.result;
 //用户名和密码校验错误
 if (result == "0") {
 $(".Error_prompt>span").text("该用户不存在或密码错误");
 $(".Error_prompt").fadeIn("fast", "linear");
 }
 }
 });
 });*/

posted @ 2017-05-22 16:06 三高娘子阅读(184) 评论(0) 编辑收藏举报

三高娘子

记住密码

公告