jquery实现记住用户名和密码

最新推荐文章于 2022-11-15 22:50:07 发布
最新推荐文章于 2022-11-15 22:50:07 发布
阅读量435 收藏 1
点赞数

这里我们选择的方法是cookie的方式去记录

首先我们写将用户名和密码写到cookie的js代码

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

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

 

注意：$("#id").prop("checked")    通过这个来获取复选框 勾选状态   jquery1.6版本之后用prop方法，之前版本用attr方法。

千万注意prop不要写错，我就把prop写成了porp找了好久的问题，原来是自己把自己坑了。

1.$.cookie("username") 读取cookie 名为username的值

2.$cookie("username","qcbin",{expires:7})  创建cookie 名为username值为qcbin,保存期限为7天。   如果将{expires:7}替换为365意思是，浏览器关闭即清除

 

 

写加载cookie的代码，这部分js代码，我们放在head头中，这样我们加载登录页的时候就会先去读cookie。

<script>
        $(document).ready(function(){
            var rem = $.cookie('remember');
            if(rem){
                $("#remember").prop("checked",true);
                $("#username").val($.cookie("username"));
                $("#password").val($.cookie("password"));
            }
        });
    </script>

注意：$(document).ready() 这个方法，浏览器就绪，就开妈执行这个下边的代码。

 

登录的html示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
    <title>login-AM</title>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <link href="/static/css/bootstrap3.3.7.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap3.3.7.min.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <style>

        .form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
        /*阴影*/
        .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
        input[type="text"],input[type="password"]{padding-left:26px;}
        .checkbox{padding-left:21px;}
    </style>
    <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="username" 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($("#username").val()!="" && $("#password").val()!="")
            {
                save_cookies();
                $.ajax({
                    url:'/login_validation/',
                    type:'post',
                    data:{
                        'username':$("#username").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 username = $("#username").val();
                var password = $("#password").val();

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


    </script>


</body>
</html>

qq_35187119
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery记住用户名和密码的具体实现
10-26
主要介绍了JQuery实现记住用户名和密码的方法,需要的朋友可以参考下
Bootstrap表单布局
weixin_44535029的博客
11-03 1231
Bootstrap表单布局
var userName=$("#userName").val()如何理解
xuanmu
02-16 1万+
val()是返回属性value对应的值。比如，使用$("#userName").val()就得到了"123"。 $("#userName")是id选择器,获得id为userName的标签,通过.val(),获得这个标签的value的值,赋值给你声明的变量 var userName ...
jquery实现记住密码功能
qq_39361068的博客
08-22 1387
js代码: &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js" &gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.cookie.js"&gt;&lt;/script&gt; &lt;scr
等保要求，密码必须使用SM2加密传输
kzhzhang的专栏
01-04 4902
根据等保要求，密码必须使用SM2加密传输。
h5使用jq实现登录记住账号密码
style201904的博客
11-20 656
<div> <div class="login"> <input type="text" placeholder="账号" class="user"> <div style="height: 1px;background: #e4e4e4;float: left;margin: .2rem 0 .5rem;width: 100%"></div> <inp.
JQuery记住用户名密码实现下次自动登录功能
10-24
主要介绍了JQuery记住用户名密码实现下次自动登录功能,本文直接给出实现代码,需要的朋友可以参考下
使用jquery的cookie实现登录页记住用户名和密码的方法
10-17
今天小编就为大家分享一篇关于使用jquery的cookie实现登录页记住用户名和密码的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
jQuery 禁止表单用户名、密码自动填充功能
10-19
主要介绍了jQuery 禁止表单用户名、密码自动填充功能,需要的朋友可以参考下
jquery实现记住登录的用户名和密码
wb785074651的博客
05-26 1565
记住登录的用户名和密码一般都选择用cookie来记录 首先需要在页面中引入jq和cookie的相关js jquery.min.js和jquery.cookie.js 然后就是给添加input标签,用户名,密码,和记住密码 <input id="username" name="username" placeholder='用户名' maxlength="16" type='text' autocomplete="off"/> <input id="password" name=
php ajax提交报异常,在ajax请求中的php – laravel TokenMismatchException异常
weixin_33166692的博客
03-22 180
我正在使用资源组，并使用此过滤器来解决TokenMismatchException问题：Route::filter('csrf', function($route, $request) {if (strtoupper($request -> getMethod()) === 'GET') {return;// get requests are not CSRF protected}$toke...
入门JQuery
sumatray的博客
09-25 235
parent元素中的指定child直接子元素所有后代元素紧贴prev之后的元素:first/:last ----- 第一个/最后一个匹配的元素:eq(N) ----- 匹配的索引为N的元素:even/:odd ----- 奇数/偶数个元素:checked ----- 表单中所有勾选的元素:disabled ----- 被禁用的元素属性选择器常用条件1. =：等于/相等2. ^=: 以** 开始3. $=: 以**结束。
用户管理系统(1)
weixin_61518137的博客
11-15 6034
用户管理系统
Rsa 前端加密
stone_tomcate的博客
01-08 979
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;    
新手使用spring boot 做的一个登录页面 的心得
热门推荐
シ❤゛甜虾的个人博客
10-24 1万+
很久之前在学校学过jsp和三大框架，之后就在也没接触过web项目，最近公司项目需要做一个web版的数据展示界面，想想用ASP呢还是用JSP，后来发现这些都已经过时了，现在都流行微服务，本来就没有什么WEB开发经验，可把我难坏了，狂补一些前端后端的知识，先看一下登录界面，也是网上copy的代码，自己找的图片，前端用的bootstrap 工程目录是这个样子的 &lt;!DOCTYPE htm...
$("#username").val()获取不到值
qq_37874220的博客
04-03 1万+
原因： <div class="input username" id="username"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="user...
在页面上用$("#userName").val();获取不到值，提示$("#userName")未定义
奔跑在IT路
03-22 5403
[size=medium]问题：在页面上用$("#userName").val();获取不到值，提示$("#userName")未定义 原因：[b][color=red]在页面中包含了var $ = function() { } 的代码[/color][/b][b][/b]，这样这里自定义的$就和jQuery中的$相冲突了。这里的$相当于定义了一个全局的变量$,所以会影响jquery在这个页...
$('#userName')[0] 与 $('#userName').eq(0) 的区别
weixin_39003573的博客
08-21 3701
先看官方对jquery eq() 的说明：          如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。 注意：这里eq() 返回一个jquery对象，可以使用jquery的属性，方法。 看一段代码： &lt;div id="userName"&gt;test...
jquery 记住密码
最新发布
04-20
在jQuery中，可以使用以下方法来实现记住密码的功能： 1. 使用cookie：可以使用jQuery的cookie插件来设置和获取cookie值。当用户选择"记住密码"时，将用户名和密码保存到cookie中。下次用户访问时，可以从cookie中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值