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>