记住密码

bai小白

于 2019-06-14 10:19:46 发布

阅读量190

点赞数 1

分类专栏： jquery

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>login-AM</title>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script>
        $(document).ready(function () {
            var rem = $.cookie('remember');
            if (rem) {
                $("#remember").prop("checked", true);
                $("#username").val($.cookie("username"));
                $("#password").val($.cookie("password"));
            }
        });
    </script>
</head>
<body>
<div class="container">
    <div class="form row">
        <div class="form-horizontal col-md-offset-3" id="login_form">
            <h3 class="form-title">LOGIN</h3>
            <div class="col-md-9">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Username" id="phone" name="username"
                           autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" id="password"
                           name="password" maxlength="8"/>
                </div>
                <div class="form-group">
                    <label class="checkbox">
                        <input type="checkbox" id="remember" value="1"/>记住我
                    </label>

                </div>
                <div class="form-group col-md-offset-9">
                    <a type="button" class="btn btn-primary pull-right" id="register" href="/register/">注册</a>
                    <button type="button" class="btn btn-success pull-right" id="submit">登录</button>
                </div>
                <div class="form-group">
                    <i class="fa fa-exclamation-triangle fa-lg" id="display_text"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $("#submit").click(function () {
        if ($("#phone").val() != "" && $("#password").val() != "") {
            save_cookies();
            $.ajax({
                url: 'http://192.168.2.149/clickfarming-web/login',
                type: 'post',
                data: {
                    'phone': $("#phone").val(),
                    'password': $("#password").val()
                },
                dataType: 'json',
                success: function (args) {
                    if (args.res == 1) {
                        // window.location="/index/";
                    } else {
                        $("#display_text").html("用户名或密码错误.");
                    }
                },
                error: function (data) {
                    alert('ajax error');
                }
            });
        } else {
            alert("用户名或密码不能为空。");
        }
    });

    //保存到cookie
    function save_cookies() {
        if ($("#remember").prop("checked")) {
            var phone = $("#phone").val();
            var password = $("#password").val();

            $.cookie("remember", "true", {expires: 7});
            $.cookie("phone", phone, {expires: 7});
            $.cookie("password", password, {expires: 7});
        } else {
            $.cookie("remember", "false", {expires: -1});
            $.cookie("phone", "", {expires: -1});
            $.cookie("password", "", {expires: -1});
        }
    };


</script>


</body>
</html>

记住密码的demo!

bai小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记住密码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>login-AM</title> <script src="js/jquery-2.1.4.js"></script> <s...
复制链接

扫一扫

专栏目录