自动登录保存信息

jquery

自动登录效果

基于bootstrap排版布局

校验时，依赖这么多的js

要注意：

1、启用cookie支持json

2、序列化form表单为json对象

3、注意checkbox选择，是采用了jquery,还是原生js
只有原生js的checkbox才有checked
转换注意给个[0]即可

js代码逻辑

// 启用cookie json模式
$.cookie.json = true;
// 确保dom加载完毕
$(function(){
    var api = {
        base:'http://localhost:3000',
        //  登录接口
        login:function(data){
            $.ajax({
                type: "POST",
                url: this.base + "/api/login",
                data: data,
                dataType: "json",
                success: function (res) {
                    alert(res.msg)
                }
            });
        }
    }
    var loginForm = $("#loginForm");
    // 校验登录
    loginForm.validate({
        // 定制错误提示样式
        errorElement: 'div',
        errorClass:'tip-box',
        submitHandler:function(form){
            // var data = $(form).serialize();
            var data = $(form).serializeJSON();
            // 获取checkbox
            var checkbox = $(form).find('input[type="checkbox"]');
            // 判断是否选中
            // console.log(checkbox[0].checked);
            if(checkbox[0].checked){
                // 如果选中，则保持数据到cookie中
                // $.cookie("userinfo", JSON.stringify(data));
                $.cookie("userinfo",data);
            }else{
                $.cookie("userinfo", null);
            }
            api.login(data);
        }
    })
    // 自动读取cookie内容
    // var userinfo = $.cookie('userinfo');
    //     userinfo = JSON.parse(userinfo);
    var userinfo = $.cookie('userinfo');
    // 判断cookie中是否存在userinfo
    if(userinfo){
        // 解析
        loginForm.find('input[name="username"]').val(userinfo['username']);
        loginForm.find('input[name="password"]').val(userinfo['password']);
        loginForm.find('input[type="checkbox"]').attr('checked','checked');
    }
})