登录时记住密码功能实现js

最新推荐文章于 2025-07-09 10:31:51 发布

前端zhou

最新推荐文章于 2025-07-09 10:31:51 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签：前端登录记住密码

本文链接：https://blog.youkuaiyun.com/qq_39339339/article/details/77453176

技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现登录页面的记住密码功能。通过CSS样式设置，创建了美观的复选框效果，并利用HTML结构完成交互逻辑。该功能允许用户在登录时选择是否保存密码，提高用户体验。

css:

.checkActive {

background: url(../images/right.png)
 no-repeat;

border: 1px
 solid #41b3f9;

}

html:

<input maxlength="20" type="text" name="username" id="UserAccount" placeholder="用户名/username" class="userNameText"/>

<input name="password" type="password" id="UserPassword" placeholder="密码/password"/>

<input type="checkbox" value="0" class="check_view_state" id="checkbox-1" style="display: none;">
<label for="checkbox-1" class="check_label "></label>
<span>记住密码</span>

js:

//写cookies
function setCookie(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}
//删除cookies
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

$(function(){

$('#checkbox-1').click(function () {
    if ($("#UserAccount").val() == "") {
        alert("用户名不能为空！");
    }
    if($("#UserPassword").val() == "")
    {
        alert("密码不能为空！");
    }
    else {
        if ($('.check_label').hasClass("checkActive")) {
            setCookie("uname", $("#UserAccount").val(), 60);
            setCookie("upwd", $("#UserPassword").val(), 60);
        }
        else {
            delCookie("uname");
            delCookie("upwd");
        }
    }
});
if (getCookie("uname") != null)
{
    $('.check_label').addClass("checkActive")
    $('#UserAccount').val(getCookie("uname"));
    $('#UserPassword').val(getCookie("upwd"));
}