HTML頁面
<input class="u-input" type="text" placeholder="用戶賬號" id="username" />
<input class="u-pass" type="password" id="password" />
<input type="checkbox" onclick="save()" id="ck_rmbUser"/>記住賬號
<button class="login" onclick="loginclick()">登錄</button>
引入cookie插件
<script src="js/jquery.cookie.js" type="text/javascript"></script>
實現方法
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie("rmbUser") == "true") {
$("#ck_rmbUser").attr("checked", true);
$("#username").val($.cookie("username"));
$("#password").val();
$("#password").val($.cookie("password"));
}
});
</script>
//記住用戶名密碼
<script type="text/javascript">
function save() {
if ($("input[type='checkbox']").is(':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 loginclick() {
if ($("#username").val() == null || $("#username").val() == "") {
alert("用戶名不能為空!")
}
if ($("#password").val() == null || $("#password").val() == "") {
alert("密碼不能為空!")
}
$.ajax({
url : "index/login",
type : "post",
data : {
login_name : $("#username").val().trim(),
login_password : $("#password").val().trim(),
verify_code : $("#u-ver").val().trim()
},
dataType : "json",
contentType : "application/x-www-form-urlencoded;charset=utf-8",
success : function(data) {
//data為jeson對象,判斷code值,0登陸成功1,登陸失敗
if (data.login_code == "0") {
//登陸成功后跳轉到主頁面
window.location.href = "main.html";
} else {
//登陸密碼錯誤后清空密碼框
document.getElementById("password").value = "";
alert(data.login_result);
}
}
});
}
</script>