表單使用者名稱和密碼記住效果

antzone發表於2017-03-13
密碼

大家一定見過這樣的效果，應該也用到過這樣的效果，那就是可以記住使用者名稱和密碼，下一次登陸的時候就不用再填寫了，這算是一項非常人性化的舉措，下面就通過程式碼例項介紹一下如何利用jQuery實現此效果。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
$(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();
        //儲存一個帶7天期限的cookie  
    $.cookie("rmbUser", "true", { expires: 7 }); 
    $.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", 
    eforeSend: 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; 
      } 
    } 
  }) 
} 
 
</script>
</head>
<body>
<div> 
<input id="username" type="text" class="txt1" /> 
<input id="password" type="text" class="txt2"/> 
</div> 
</body>
</html>

以上程式碼需要的朋友可以參考一下，不僅僅介紹了利用cookie實現記住使用者名稱，而且還有其他功能效果，當然在實際應用的時候需要引用jquery庫檔案和jquery.cookie.js檔案。

相關文章