记住密码，记住我功能_账号密码【记住我】功能仅限于24内-优快云博客

本文链接：https://blog.youkuaiyun.com/GFJadfkljasfg/article/details/122317275

这是一个HTML登录页面的示例，使用了JSP标签库和Bootstrap样式。页面包含用户名、密码输入框和记住我选项。当点击登录按钮时，JavaScript会捕获输入并检查是否为空，如果选中了记住我，还会将用户名和密码存储到cookie中。如果所有验证都通过，将使用AJAX发送POST请求到后端进行登录验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理系统 - 登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/css/bootstrap.css" rel="stylesheet">
</head>

<body background="img/999.png" onload="GetCookie()">


<div class="container">
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xs-offset-1 col-sm-offset-2 col-md-offset-3 col-lg-offset-4"
         style="margin-top: 30vh;">
        <div class="panel panel-default">
            <div class="panel-heading">登录</div>
            <div class="panel-body">
                <div class="form-group">
                    <input type="text" class="form-control" name="username" placeholder="请输入用户名" value="">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="请输入密码" value="">
                </div>
                <div class="form-group">
                    <input type="checkbox" name="rememberMe" >记住我
                </div>
                <button type="button" class="btn btn-primary btn-block" id="btn-login">登录</button>
            </div>
        </div>
    </div>
</div>

<script src="static/js/jquery.js"></script>
<script src="static/plugin/layer/layer.js"></script>
<script>
    $('#btn-login').click(function () {
        var username = $('input[name=username]').val();  //获取输入的帐号名
        var password = $('input[name=password]').val();  //获取输入的密码
        var rememberMe=$('input[name=rememberMe]').get(0).checked;  //获取 记住我的状态值
        console.log( $('input[name=rememberMe]').get(0));  //控制台打印类型
        if (!username) {
            layer.msg('用户名不能为空', {icon: 7, time: 1000});
            return false;
        }
        if (!password) {
            layer.msg('密码不能为空', {icon: 7, time: 1000});
            return false;
        }
        if (rememberMe){
            //alert("勾选了记住密码！");
            var d=new Date();
            d.setTime(d.getTime()+30*24*60*60*1000);
            var expire="expire="+d.toGMTString();
                                                        //console.log("expire为"+expire);
            document.cookie="nameandpwd="+username+"-"+password+";"+expire;
            alert(document.cookie);
           //alert(d.getTime()+30*24*60*60*1000);
            //d.setTime(d.getTime()+(30*24*60*60*1000));

        }else {
            //alert("没勾！");
        }
        $.ajax({   //结合jquery的ajax请求
            url: 'user?flag=login',     //请求的user这个servlet  ?flag=login是传的请求参数
            type: 'post',    //请求方式post
            data: {            //请求参数
                username: username,
                password: password,
                rememberMe: rememberMe
            },
            dataType : "json",   //ajax请求之后，预期返回的数据类型为json字符串。
            success: function (response) {   //ajax请求成功后，执行的函数。
                console.log(response);   //response为响应回来的json串。
                if (response.code == 0) {
                    layer.msg(response.msg, {icon: 1, time: 1000}, function () {    //1秒
                        window.location.href = 'index.jsp';  //页面跳转
                    });
                } else {
                    layer.alert(response.msg);
                }
            }
        })
    });

    function GetCookie() {
        var cookies=document.cookie;
                                                 //alert("cookies------为"+cookies);
        if (cookies){   //如果cookies不为空
            var fenge=cookies.split("=");
            console.log(typeof fenge);
            console.log( fenge);
            var namepwd=fenge[1].split("-");
            console.log(namepwd);
            document.getElementsByName("username")[0].value=namepwd[0];
            document.getElementsByName("password")[0].value=namepwd[1];

            //console.log(document.getElementsByName("username")[0]);
            //console.log("name为"+namepwd[0]);
            //console.log(typeof namepwd[0]);
        }

    }


</script>
</body>
</html>