layui实现记住密码功能

登录的时候大部分都是记住密码这个功能的，最近用layui写项目，顺便把这个常用的功能记录下

准备

需要layui、jquery.min.js、jquery.cookie.js
jquery.cookie.js的下载地址为：jquery.cookie.js

前端样式

这里我把我的form表单展示出来，引用的时候jquery.cookie.js放在jquery下

 <form  class="layui-form"  lay-filter="add_form" >
                <div style="margin-top: 30px" class="layui-form-item" >
                    <label   class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input name="username" style="width: 240px" class="layui-input" type="text" placeholder="请输入用户" >
                    </div>
                </div>
                <div style="margin-top: 30px" class="layui-form-item">
                    <label   class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <div class="layui-input-block">
                        <input name="password" style="width: 240px" class="layui-input" type="password" placeholder="请输入密码" >
                    </div>
                </div>
                <div style="margin-top: 10px" class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                    <input type="checkbox" lay-filter="remember" name="remember_user" id="remember_user"  lay-skin="primary" title="记住密码">
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top: 30px">
                    <div class="layui-input-block">
                        <button style="background: #1E9FFF" class="layui-btn" lay-submit=""  lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

js

这里我把我的js展示出来

layui.use('form', function(){
        var form = layui.form,
            layer = layui.layer;
        /*记住用户名和密码*/
        if ($.cookie("remember_user")) {
            $("#remember_user").prop("checked", true);
            form.val("add_form",{
                "username":$.cookie("user_name"),
                "password":$.cookie("user_password")
            })
        }



        //监听提交
        form.on('submit(formDemo)', function(data){
           data = data.field;
            if (data.username==''){
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                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_n    ame", 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
                });
            }

            $.ajax({
                type:'GET',
                url: 'user/login',
                datatype:"json",
                contentType:"application/json",
                data: {username:data.username,password:data.password},
                success:function (res) {

if (res.code=='0'){//登录成功，直接跳转到首页,最好进入后台进行重定向
window.location.href='/web/indexx'
}else{
    layer.msg(res.msg)
}
                }
            });


            return false;
        });

    });