JQuery实现记住用户名和密码

浏览数：21 / 时间：2015年06月09日

HTML Code

1 <div>
2      <input id="username" type="text" class="txt1"  value="请输入用户名" onclick="if(this.value==‘请输入用户名‘){this.value=‘‘; }" onfocus="if(this.value==‘请输入用户名‘){this.value=‘‘; }" />
3      <input id="password" type="text" class="txt2"  value="请输入密码"  onclick="if(this.value==‘请输入密码‘){this.value=‘‘;this.type=‘password‘;}" onfocus="if(this.value==‘请输入密码‘){this.value=‘‘;this.type=‘password‘;}"/>
4 </div>

JS Code

 1 $(document).ready(function(){
 2       if ($.cookie("rmbUser") == "true") {
 3             $("#ck_rmbUser").prop("checked", true);
 4             $("#username").val($.cookie("username"));
 5             $("#password").remove();
 6             $("#pass").append("<input id=‘password‘ type=‘password‘ class=‘txt2‘/>");
 7             $("#password").val($.cookie("password"));
 8       }
 9       $("#loginButton").click(function(){
10             if(check()){
11                    login();
12                }
13       });
14 });
15 
16 
17 //记住用户名密码
18 function save() {
19       if ($("#ck_rmbUser").prop("checked")) {
20             var username = $("#username").val();
21             var password = $("#password").val();
22             $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
23             $.cookie("username", username, { expires: 7 });
24             $.cookie("password", password, { expires: 7 });
25       }else{
26             $.cookie("rmbUser", "false", { expire: -1 });
27             $.cookie("username", "", { expires: -1 });
28             $.cookie("password", "", { expires: -1 });
29       }
30 };
31 
32 
33 function check(){
34       var username = $("#username").val();
35       var password = $("#password").val();
36       if(username == "" || username == "请输入用户名"){
37          $("#tip").text("请输入用户名!");
38          $("#username").focus();
39          return false;
40       }
41       if(password == "" || password == "请输入密码"){
42          $("#tip").text("请输入密码!");
43          $("#password").focus();
44          return false;
45       }
46       $("#tip").text("");
47       return true;
48 }
49 
50 function login(){
51      $.ajax({
52            type:"POST",
53            url: "login!loginValidate.action",
54            data:{userName:$("#username").val(),password:$("#password").val()},
55            dataType:"json",
56            beforeSend: function(){
57                 showOverlay();
58            },
59            success:function(data){
60                 if(data.success){
61                       addCookie("userName", $("#username").val(), 0);
62                       save();
63                       location.href = "/index.jsp";   
64                 }else{
65                       $("#overlay").hide();
66                       $("#tip").text("用户名或密码错误，请重新登录！");
67                       return false;
68                     }
69                         
70              }          
71       });
72 }