Web 实现登录记住密码功能

谁践踏了优雅 2021-10-19 01:24 705阅读 0赞

HTML

<form id="nameLoginForm">
        账户名：<input type="text" name="name" id="name" class="input-text" autocomplete="off" placeholder="用户名/邮箱/手机号" />
        密码：<input type="password" name="password" id="password" class="input-text" placeholder="请输入密码">
        <input id="normalSubmit" class="btn-settlement" type="button" onclick="login()" value="登录"  >
        <span class="register"><input name="remember" type="checkbox" id="remember" class="rem-check">记住密码</span>
        <span class="forget-pass"> <input name="admin" type="checkbox" id="admin">管理员登录</span>
    </form>

JS

<script type="text/javascript">
        //记住用户名,默认不记住
        var checkFlag = false;
        function remeberNameAndPwd(){
            //这里是当页面是从注册页面注册成功过来
            var remFlag = $("#remember").is(':checked');
            if(remFlag==true){
                checkFlag = true;
            }
            //当在login.html页面点击是否记住z
            $("#remember").click(function(){
                var remFlag = $("#remember").is(':checked');
                if(remFlag==true){
                    $("#remember").attr("checked",true);
                    checkFlag=true;
                }else{
                    $("#remember").attr("checked",false);
                    checkFlag=false;
                }
            })
        }
    
        //写入cookie与删除
        function setAndRemoveCookie(){
            //注意 密码写入cookie的时候这里没有写加密 是不安全的
            if(checkFlag){
                var name = $("#name").val();
                var password = $("#password").val();
                $.cookie("remember","true",{expires : 7 })//单位：天
                $.cookie("name",name,{expires: 7 });
                $.cookie("password",password,{expires: 7 })
            }else{
                //删除cookie
                $.cookie("remember","false",{expires:-1 });
                $.cookie("name",null,{expires:-1});
                $.cookie("password",null,{expires:-1});
            }
        }
    
        //获取cookie
        function getCookie(){
            if($.cookie("remember")=="true"){
                $("#remember").attr("checked",true);
                $("#name").val($.cookie("name"));
                $("#password").val($.cookie("password"));
            }
        }
    
        $(function(){
            getCookie();//获取cookie
            remeberNameAndPwd();//remember点击事件
        });
    
        //登录
        function login() {
            var name = $("#name").val()
            var password = $("#password").val();
            //是否管理员登录
            var remId;
            var remAdmin = $("#admin").is(':checked');
            if(remAdmin){
                remId='1';
            }else {
                remId='0';
            }
    
            if($(".tips ").is(":visible")){
                return;
            }
            if (name == "") {
                showError("请输入用户名");
                return;
            }
            if (password == "") {
                showError("请输入密码");
                return false;
            }
            $.ajax({
                url : 'login',
                type:'post',
                data : {
                    name : name,
                    password : password,
                    remAdmin:remId
                },
                dataType : 'json',
                cache:false,
                success : function(d) {
                    if ("0"==d.err) {
                        setAndRemoveCookie();//是否写入cookie
                        window.location.href = d.url;
                    }else{
                        showError(d.msg);
                        return false;
                    }
                }
            })
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，705人围观）

还没有评论，来说两句吧...

相关阅读

相关 java web记住密码_JavaWeb简单实现记住密码以及自动填充功能

使用技术 jQuery druid MySQL Jackson AJAX JSON –JSP页面 Created by IntelliJ IDEA. User: QiLi

约定不等于承诺〃/ 2022年11月03日 10:40/ 0 赞/ 34 阅读

相关 vue实现登录，记住密码功能（cookie）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2Nv

系统管理员/ 2022年09月03日 04:29/ 0 赞/ 308 阅读

相关 sharepreference实现记住密码功能

SharePreference是用于保存数据用的，主要调用Context.getSharePreferences(String name, int mode)方法来得到

待我称王封你为后i/ 2022年08月02日 00:21/ 0 赞/ 282 阅读

相关 vue简单实现记住密码功能

原理是在提交表单的时候把用户名和密码的值存入cookie中然后再次进入页面时读取cookie html部分 <div class="log\_form">

柔光的暖阳◎/ 2022年05月24日 13:41/ 0 赞/ 286 阅读

相关 Android SharedPreferences实现记住密码功能

布局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.Constra

我就是我/ 2022年05月24日 06:37/ 0 赞/ 297 阅读

相关登录时记住密码的实现

//判断是否有cookie的值 var staffCodeValue = me.getCookieValue('staff_code') ; va

太过爱你忘了你带给我的痛/ 2022年05月20日 01:53/ 0 赞/ 308 阅读

相关智能管家---10. 用户登录功能实现（记住密码）

接下来实现用户登录功能，图解简要过程如下： ![这里写图片描述][70] 用户登录功能和用户注册功能实现过程大同小异，都是点击按钮以后获取用户输入的值，判断是否为空，如果

一时失言乱红尘/ 2022年05月17日 06:06/ 0 赞/ 411 阅读

相关登录实现记住我功能

文章目录原理实现登录页面添加记住我checkbox BrowserSecurityConfig 中初始化 Persistent

小灰灰/ 2022年01月31日 15:59/ 0 赞/ 499 阅读

相关 Web 实现登录记住密码功能

HTML <form id="nameLoginForm"> 账户名：<input type="text" name="name" id="name"

谁践踏了优雅/ 2021年10月19日 01:24/ 0 赞/ 706 阅读

相关 Javascript登录页面“记住密码”实现

　　JS记住密码实现效果： JavaScript Code <table style="font-family:Consolas, 'Courier New';font

柔光的暖阳◎/ 2021年09月30日 10:20/ 0 赞/ 432 阅读