Layui登陆记住密码

1.引入文件（jquery，jquery.cookie.js）

注意顺序（未包含layui，自行添加）

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script src="js/jquery.cookie.js" th:src="@{/lib/jquery-3.4.1/jquery.cookie.js}" ></script>

2.代码

<form class="layui-form" lay-filter="add_form" action="" th:action="@{/system/login}" method="post">
              
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" name="username" lay-verify="required|account" placeholder="账号" autocomplete="off" class="layui-input" >
                  
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" >
                  
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" >

                    <div class="captcha-img">
                        <img title="点击切换验证码" id="captchaPic"  class="pull-right" style="cursor: pointer;" src="" th:src="@{/system/getCpacha(vl=4,w=160,h=40)}">
                    </div>
                   
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" lay-filter="remember" name="remember_user" id="remember_user"  lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">

                    <button   class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>

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

        /*记住用户名和密码*/
        if ($.cookie("remember_user")) {
            console.log($.cookie("user_name"))
            console.log($.cookie("user_password"))
            $("#remember_user").prop("checked", true);
            form.val("add_form",{
                "username":$.cookie("user_name"),
                "password":$.cookie("user_password")
            })
        }

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }
            //勾选记住密码
            if (data.remember_user== "on") {
                var user_name = data.username;
                var user_password = data.password;
                $.cookie("remember_user", "true", {
                    expires: 7
                }); // 存储一个带7天期限的 cookie
                $.cookie("user_name", user_name, {
                    expires: 7
                }); // 存储一个带7天期限的 cookie
                $.cookie("user_password", user_password, {
                    expires: 7
                }); // 存储一个带7天期限的 cookie
            } else {
                $.cookie("remember_user", "false", {
                    expires: -1
                }); // 删除 cookie
                $.cookie("user_name", '', {
                    expires: -1
                });
                $.cookie("user_password", '', {
                    expires: -1
                });
            }
            return true;//false不能提交
        });
    });