jquery实现记住密码功能

最新推荐文章于 2022-12-06 14:02:46 发布

转载最新推荐文章于 2022-12-06 14:02:46 发布 · 579 阅读

本文介绍了一种使用jQuery插件实现登录表单的方法。该方法可以自动填充用户名和密码，并根据用户选择是否记住登录信息。此外，还实现了基本的表单验证功能。

js代码:

[javascript]view plaincopy 
   
 <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>  
 <script type="text/javascript" src="js/jquery.cookie.js"></script>  
 <script type="text/javascript">  
     $(function(){  
         if($.cookie("login")=="true"){  
                 $("#username").val($.cookie("username"));  
                 $("#password").val($.cookie("password"));  
                 $("#checkbox1").prop("checked",true);  
             }  
         $("#submit").click(function(){  
             if(check()){  
                 save();  
                 alert("以保存");  
                 login();  
             }  
         });  
     });  
     function save(){  
         if($("#checkbox1").get(0).checked){  
             var username = $("#username").val();  
             var password = $("#password").val();  
             $.cookie("login","true",{expire:7});  
             $.cookie("username",username,{expires:7});  
             $.cookie("password",password,{expires:7});  
         }else{  
             $.cookie("login","false",{expire:-1});  
             $.cookie("username","",{expires:-1});  
             $.cookie("password","",{expires:-1});  
         }  
     };  
     function check(){  
         var username = $("#username").val();  
         var password = $("#password").val();  
         if(username==""){  
             alert("请输入用户名");  
             $("#username").focus();  
             return false;  
         }  
         if(password==""){  
             alert("请输入密码");  
             $("#password").focus();  
             return false;  
         }  
         return true;  
     }  
     function login(){  
         $.ajax({  
             type:"post",  
             url:"",  
             data:{},  
             datatype:"json",  
             async:true,  
             success:function(data){  
                 if(data.success){  
                     save();  
                     alert("cookie")  
                 }  
             }  
         });  
     }  
 </script>  

前端代码:

[html]view plaincopy 
   
 <div class="container" style="margin-top: 10px;">  
                 <div class="row">  
                     <div class="col-md-offset-3 col-md-6">  
                         <form class="form-horizontal">  
                             <span class="heading">用户登录</span>  
                             <div class="form-group">  
                                 <input type="text" class="form-control" id="username" placeholder="用户名">  
                                 <i class="fa fa-user"></i>  
                             </div>  
                             <div class="form-group help">  
                                 <input type="password" class="form-control" id="password" placeholder="密　码">  
                                 <i class="fa fa-lock"></i>  
                                 <a href="#" class="fa fa-question-circle"></a>  
                             </div>  
                             <div class="form-group">  
                                 <div class="main-checkbox">  
                                     <input type="checkbox" value="None" id="checkbox1" name="check"/>  
                                     <label for="checkbox1"></label>  
                                 </div>  
                                 <span class="text">Remember me</span>  
                                 <button type="submit" class="btn btn-default" id="submit">登录</button>  
                                 <button type="reset" class="btn btn-default" style="margin-right: 20px;">重置</button>  
                                   
                             </div>  
                         </form>  
                     </div>  
                 </div>  
             </div>  