登录记住用户功能

这两天做了个登录页面要加入记住用户名及密码的功能,参照了网友们的写法

切记需启动服务才可记录在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; 
}

  

 

posted @ 2017-12-13 11:13  ducg  阅读(310)  评论(0)    收藏  举报