登录记住用户功能
这两天做了个登录页面要加入记住用户名及密码的功能,参照了网友们的写法
切记需启动服务才可记录在cookie里
引入库
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js" ></script>
html
<div> <input id="name" type="text" class="txt1" placeholder="请输入用户名" /> <br> <input id="password" type="password" class="txt2" placeholder="请输入密码" /> <p id="tip"></p> <input type="checkbox" id="ck_rmbUser" /><label for="ck_rmbUser">记住</label> <input type="button" id="loginButton" value="登录"/> </div>
JS
$(function(){
//初始化
if ($.cookie("rmbUser") == "true") {
$("#ck_rmbUser").prop("checked", true);
$("#name").val($.cookie("name"));
$("#password").val($.cookie("password"));
}
$("#loginButton").click(function(){
if(check()){
save();
}
});
});
//记住用户名密码
function save() {
if ($("#ck_rmbUser").prop("checked")) {
var name = $("#name").val();
var password = $("#password").val();
$.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
$.cookie("name", name, { expires: 7});
$.cookie("password", password, { expires: 7});
//alert("记住用户名密码");
}else{
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("name", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
//alert("不记住用户名密码");
}
};
//校验
function check(){
var name = $("#name").val();
var password = $("#password").val();
if(name == "" || name == "请输入用户名"){
$("#tip").text("请输入用户名!");
$("#name").focus();
return false;
}
if(password == "" || password == "请输入密码"){
$("#tip").text("请输入密码!");
$("#password").focus();
return false;
}
$("#tip").text("");
return true;
}

浙公网安备 33010602011771号