`
rantengfei1986
  • 浏览: 4556 次
  • 性别: Icon_minigender_1
  • 来自: 兰州
文章分类
社区版块
存档分类
最新评论

JQuery实现记住用户名和密码

 
阅读更多
HTML Code
<div>
      <input id="username" type="text" class="txt1"  value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" />
      <input id="password" type="text" class="txt2"  value="请输入密码"  onclick="if(this.value=='请输入密码'){this.value='';this.type='password';}" onfocus="if(this.value=='请输入密码'){this.value='';this.type='password';}"/>
</div>


JQuery Code

$(document).ready(function(){
      if ($.cookie("rmbUser") == "true") {
            $("#ck_rmbUser").prop("checked", true);
            $("#username").val($.cookie("username"));
            $("#password").remove();
            $("#pass").append("<input id='password' type='password' class='txt2'/>");
            $("#password").val($.cookie("password"));
      }
      $("#loginButton").click(function(){
            if(check()){
                   login();
               }
      });
});


//记住用户名密码
function save() {
      if ($("#ck_rmbUser").prop("checked")) {
            var username = $("#username").val();
            var password = $("#password").val();
            $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
            $.cookie("username", username, { expires: 7 });
            $.cookie("password", password, { expires: 7 });
      }else{
            $.cookie("rmbUser", "false", { expire: -1 });
            $.cookie("username", "", { expires: -1 });
            $.cookie("password", "", { expires: -1 });
      }
};


function check(){
      var username = $("#username").val();
      var password = $("#password").val();
      if(username == "" || username == "请输入用户名"){
         $("#tip").text("请输入用户名!");
         $("#username").focus();
         return false;
      }
      if(password == "" || password == "请输入密码"){
         $("#tip").text("请输入密码!");
         $("#password").focus();
         return false;
      }
      $("#tip").text("");
      return true;
}

function login(){
     $.ajax({
           type:"POST",
           url: "login!loginValidate.action",
           data:{userName:$("#username").val(),password:$("#password").val()},
           dataType:"json",
           beforeSend: function(){
                showOverlay();
           },
           success:function(data){
                if(data.success){
                      addCookie("userName", $("#username").val(), 0);
                      save();
                      location.href = "/index.jsp";   
                }else{
                      $("#overlay").hide();
                      $("#tip").text("用户名或密码错误,请重新登录!");
                      return false;
                    }
                        
             }          
      });
}


分享到:
评论

相关推荐

    Javascript实现登录记住用户名和密码功能

    Javascript实现登录记住用户名和密码功能的核心在于使用Web存储技术,这里主要用到了cookies技术来实现这一需求。在页面加载时,可以通过读取保存在本地的cookies来自动填充表单中的用户名和密码信息,从而达到记住...

    JQuery记住用户名和密码的具体实现

    JQuery记住用户名和密码的具体实现是一个前端技术解决方案,它允许网站用户在登录时选择记住自己的用户名和密码,以便于下次访问时自动填充这些信息。通过使用Cookie来存储用户的选择以及凭据,可以实现这一功能。 ...

    通过jquery.cookie.js实现记住用户名、密码登录功能

    主要介绍了通过jquery.cookie.js实现记住用户名、密码登录功能,通过Cookies让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;具体实现过程大家通过本文一起看看吧

    登录页面记住用户名密码

    在IT行业中,登录页面是用户访问网站或...以上就是实现"登录页面记住用户名密码"涉及的关键知识点,涵盖了前端、后端和安全性的多个方面。通过这样的设计,我们能够在提升用户便利性的同时,兼顾系统的安全性和合规性。

    jQuery之Cookie用法:记住用户名和密码实例.rar

    jQuery之Cookie用法:记住用户名和密码实例,已打包为demo,欢迎大家下载(最火软件站)。 jquery中实现cookie的操作相比js要简单很多 操作步骤如下 1、引入JS文件(下载包中已包含) jquery-1.7.1.js jquery.cookie...

    一个记住用户名密码demo

    本项目名为"一个记住用户名密码demo",旨在提供一个实现这一功能的示例代码,帮助开发者理解和实践。 在Web应用程序中,记住用户名密码的功能通常涉及到以下几个关键知识点: 1. **本地存储**:最常见的实现方式是...

    使用jquery的cookie实现登录页记住用户名和密码的方法

    在本文中,我们将探讨如何使用jQuery的Cookie插件来实现在登录页面上记住用户名和密码的功能。这个功能对于提高用户体验至关重要,因为它允许用户在下次访问时不必重新输入他们的凭据。我们将详细介绍实现这一功能所...

    jQuery 禁止表单用户名、密码自动填充功能

    在网页开发中,表单自动填充(Autocomplete)是一项便捷的功能,它允许浏览器根据用户的输入历史自动填充表单字段,尤其是对于登录表单中的用户名和密码。然而,有时候这种功能可能会造成不便,例如填充错误的信息...

    JQuery记住用户名密码实现下次自动登录功能

    ### JQuery记住用户名密码实现下次自动登录功能知识点解析 #### 知识点一:JQuery及Cookie简介 **JQuery** 是一个快速、小巧、功能丰富的JavaScript库。它使用户能够通过编写更少的代码来操作文档、处理事件、实现...

    jquery记住账号密码

    通过以上步骤,我们可以实现一个简单的jQuery记住账号密码的功能。然而,实际项目中可能还需要考虑到更多细节,比如用户清空浏览器缓存、跨设备同步、多账户管理等。理解并掌握这些技术对于提升网站用户体验至关重要...

    解决IE7、IE8、火狐浏览器需要用户名密码进行本地测试的问题

    IE7、IE8、火狐浏览器需要用户名密码进行本地测试的问题是一个常见的问题,当我们在使用IE7、IE8、火狐浏览器访问本地站点时,总是提示登录的用户名和密码,这让我们感到非常困扰。下面我们将详细介绍这个问题的解决...

    Jquery实现用户注册和登入(Asp.Net版)

    - **自动填充**:利用jQuery获取并保存用户上次登录的信息,可以实现自动填充用户名或密码功能。 - **记住我**:添加"记住我"选项,通过设置cookie,使用户在下次访问时自动登录。 - **Ajax验证**:同样,登录时...

    html5+jquery非常炫丽的登录界面,包含登录、注册、修改密码等效果

    4. Ajax交互:使用`.ajax()`或`.post()`方法实现异步数据传输,如向服务器发送登录请求,验证用户名和密码,无需刷新页面即可反馈结果。 在登录过程中,通常会涉及前后端交互。前端发送登录请求,后端服务器(可能...

    jquery实现模仿搜狐登录界面背景切换特效

    1. **HTML结构**:登录界面通常包括用户名输入框、密码输入框、登录按钮以及可能的其他元素,如“记住我”选项或“忘记密码”链接。HTML代码应该正确地组织这些元素,同时设置好相关的ID或类名,以便于jQuery选择器...

    jQuery实现的动画隐藏下拉登陆框

    例如,可以使用`keyup`事件来检查用户名和密码是否为空,或者使用AJAX实现无刷新登录。 ```javascript $("#loginBox form").submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 var ...

    jQuery完整注册表单提交验证

    这个验证系统包括了多个关键的验证环节,如用户名、密码强度、显示/隐藏密码、手机号码输入控制以及手机验证码、真实姓名和身份证号的验证。让我们一一解析这些功能的实现。 首先,**用户名验证** 是注册过程中的...

Global site tag (gtag.js) - Google Analytics