layui登录（生成验证码、记住密码、登录、退出）学习笔记

最新推荐文章于 2023-10-25 21:36:59 发布

朝朝&暮暮

最新推荐文章于 2023-10-25 21:36:59 发布

阅读量4.6k

点赞数 1

文章标签： layui

本文链接：https://blog.csdn.net/weixin_45421804/article/details/112647435

版权

页面

<html class="loginHtml">

<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
</head>

<body class="loginBody">
    <form class="layui-form">
        <div class="user-login-header">
            <img src='../../images/logo.png'>
            <p>后台系统</p>
        </div>
        <div class="layui-form">
            <div class="layui-form-item input-item">
                <label for="userName">用户名</label>
                <input id="loginUsername" type="text" name="username" placeholder="请输入用户名" class="layui-input"
                    lay-verify="required" autocomplete="off">
            </div>

            <div class="layui-form-item input-item">
                <label for="password">密码</label>
                <input id="loginPassword" type="password" name="password" placeholder="请输入密码" class="layui-input"
                    lay-verify="required" autocomplete="off">
            </div>

            <div class="layui-form-item form_code">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs7">
                        <div class="layui-form-item input-item">
                            <label for="userName layui-icon-username">验证码</label>
                            <input id="loginCard" type="text" placeholder="请输入验证码" name="card" class="layui-input"
                                autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <input id="loginCode" class="layui-input user-login-codeimg" type="button">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember" id="remember" lay-skin="primary" title="记住密码">
                <div class="layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i
                        class="layui-icon layui-icon-ok"></i></div>
            </div>
            <div class="layui-form-item">
                <input id="loginBtn" type="button" class="layui-btn layui-btn-fluid" value="登录"></input>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="login.js"></script>
</body>

</html>

layui.use(['form', 'jquery'], function () {
    var $ = layui.jquery;
    form = layui.form,

        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode')
            // 验证码切换
            $('#loginCode').on('click', function () {
                createCode('#loginCode')
            });
            // 登录事件
            $('#loginBtn').on('click', function () {
                login()
            });
            // 注册事件
            $('#loginRegister').on('click', function () {
                register()
            });
            // 退出登录事件
            $('.signOut').click(function () {
                logout();
            });
            // 页面初始化Cookie
            window.onload = getCookie()
        });
        
         //表单输入效果
    $(".loginBody .input-item").click(function (e) {
        e.stopPropagation();
        $(this).addClass("layui-input-focus").find(".layui-input").focus();
    })
    $(".loginBody .layui-form-item .layui-input").focus(function () {
        $(this).parent().addClass("layui-input-focus");
    })
    $(".loginBody .layui-form-item .layui-input").blur(function () {
        $(this).parent().removeClass("layui-input-focus");
        if ($(this).val() != '') {
            $(this).parent().addClass("layui-input-active");
        } else {
            $(this).parent().removeClass("layui-input-active");
        }
    })
    
    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        ];
        for (var i = 0; i < codeLength; i++) {
            // 随机数索引
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }
    
    // 校验验证码、用户名、密码     
    function validateCode(inputID, codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length <= 0) {
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode != cardCode) {
            layer.alert("请输入正确验证码");
            return false;
        }
        return true;
    }

    //设置cookie  
    function setCookie() {
        var loginCode = $("#loginUsername").val(); //获取用户名信息    
        var pwd = $("#loginPassword").val(); //获取登录密码信息    
        var checked = $("input[type='checkbox']").is(':checked'); //获取“是否记住密码”复选框  
        //console.log("setCookie方法是否记住密码："+checked);
        if (checked) { //判断是否选中了“记住密码”复选框    
            //设置cookie过期时间
            // var date = new Date();
            // date.setTime(date.getTime() + 60 * 1000); //只能这么写，60表示60秒钟
            //console.log("cookie过期时间："+date);
            $.cookie("login_code", loginCode, {
                expires: 7,
                path: '/'
            }); //调用jquery.cookie.js中的方法设置cookie中的用户名    
            $.cookie("pwd", pwd, {
                expires: 7,
                path: '/'
            }); //调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64（jquery.base64.js）进行加密
        } else {
            $.cookie("login_code", null);
            $.cookie("pwd", null);
        }
    }

    //清除所有cookie函数
    function clearAllCookie() {
        var date = new Date();
        date.setTime(date.getTime() - 10000);
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        // console.log("需要删除的cookie名字：" + keys);
        if (keys) {
            for (var i = keys.length; i--;)
                document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
        }
    }
    //获取cookie    
    function getCookie() {
        var loginCode = $.cookie("login_code"); //获取cookie中的用户名    
        var pwd = $.cookie("pwd"); //获取cookie中的登陆密码  
        // console.log("获取cookie:账户：" + loginCode);
        // console.log("获取cookie:密码：" + pwd);
        if (!loginCode || loginCode == 0) {
            // console.log("账户：" + !loginCode);
            // alert("请输出内容！");
        } else {
            $("#loginUsername").val(loginCode);
        }
        if (!pwd || pwd == 0) {
            // console.log("密码：" + !pwd);
        } else {
            //密码存在的话把密码填充到密码文本框    
            //console.log("密码解密后："+$.base64.decode(pwd));
            $("#loginPassword").val(pwd);
            //密码存在的话把“记住用户名和密码”复选框勾选住    
            $("[name='remember']").attr("checked", "true");
        }
        form.render();

    }

    function login() {
        //判断是否选中复选框，如果选中，添加cookie  
        var rememberPwd = $("input[type='checkbox']").is(':checked');
        // console.log("是否记住密码：" + rememberPwd);
        if (rememberPwd) {
            //添加cookie    
            setCookie();
        } else {
            clearAllCookie();
        }
        netWorking(loginUsername, loginPassword); //联网上传账号密码
    }


    // 登录流程
    function netWorking(loginUsername, loginPassword) {
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
        } else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.username = loginUsername;
            params.password = loginPassword;
            $.ajax({
                type: 'post',
                url:,
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (data) {
                    if (typeof (data.flag) === 'undefined') {
                        return;
                    }
                    if (!data.flag) {
                        layer.alert(data.message);
                        return;
                    }
                    layui.data('sdtoken', {
                        key: "token",
                        value: data.data.token
                    });
                    window.location.href = '/';
                },
                error: function () {
                    $('#loginBtn').val("登录");
                }
            });
        }
    }
})
//退出登录
function logout() {
    $.ajax({
        type: 'get',
        url:,
        data: {
            "name": ""
        },
        contentType: 'application/json',
        success: function (data) {
            if (data.code == 999 || data.code == undefined) {
                window.location.href = "page/login/login.html";
            }
        },
        error: function (e) {
            console.log("退出异常：" + e);
        }

    });
}

朝朝&暮暮

关注

1
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
layui登录（生成验证码、记住密码、登录、退出）学习笔记

页面<html class="loginHtml"><head> <meta charset="utf-8"> <title>登录页</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name
复制链接

扫一扫