ajax验证用户登陆及记住密码

最新推荐文章于 2022-11-02 14:50:42 发布

转载最新推荐文章于 2022-11-02 14:50:42 发布 · 2.2k 阅读

网页开发专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个前端登录页面的设计与实现，包括JS验证代码详解及记住密码功能的实现方式。

一个人独自负责一个项目，正好记下以前没实现过的技术点，今天就从登陆功能开始，前端是js验证，后端是php脚本验证并且添加了记住密码功能。

从上图可以看出，前端西安嘉信铁路器材有限公司官网（http://www.xianjiaxin198.com/）主要的技术点是验证用户名和密码是否输入并给予提示，为了提高用户体验，用户一进入该页面，便自动聚焦到用户名输入框，同时在密码输入框里绑定个onkeypress事件，也就是用户输入完密码后，西安嘉信铁路器材有限公司官网（http://www.xianjiaxin198.com/）按回车键就可以完成操作，当然了这里做的事ajax验证，同时对于任何验证出错的信息都出现在用户名输入框上（见下图），并且设置了时限为3秒，也就是3秒后消失。

下面为html代码

 
  <form>  
     <span class="error_msg"></span>  
     <p class="pst_relative">  
         <label class="input_msg"></label><input type="text" name="username" placeholder="用户名" class="login_input" maxlength="60">  
     </p>  
     <p class="pst_relative">  
         <label class="input_msg"></label><input type="password" name="passwd" placeholder="密码" onkeydown="keydown(event)" class="login_input" maxlength="60">  
     </p>  
     <p class="clearfix">  
         <span class="fl_left w_b60 psw_info">  
             <input type="checkbox" id="remmberpwd">  
             <label for="remmberpwd">记住密码</label>  
         </span>  
         <a class="fl_right psw_info" href="#">忘记密码？</a>  
     </p>  
     <p class="clearfix">  
         <input class="fl_left btn btn_login" type="button" value="登   录">  
         <a class="fl_right log_rega" href="#">免费注册</a></p>  
 </form>  
 

下面为js代码验证代码( 西安嘉信铁路器材有限公司官网（http://www.xianjiaxin198.com/）)

 
  $(function() {  
     var height = $(document).height();  
     var bgheight = $(".login_bg").height();  
     $(".login_bg").css({"height": height + "px"});  
   
     $(".error_msg").hide();  
   
     // 默认账号输入框获得焦点  
     $('input[name=username]').focus();  
   
     // 点击登陆  
     $('.btn_login').click(function() {  
         var username = $.trim($('input[name=username]').val());  
         var passwd = $.trim($('input[name=passwd]').val());  
         var remember = $('#remmberpwd').is(':checked') ? 1 : 0;  
         if (username == '') {  
             $(".error_msg").html('请填写用户名');  
             $(".error_msg").show().fadeOut(2000);  
             $('input[name=username]').focus();  
             return false;  
         } else if (passwd == '') {  
             $(".error_msg").html('请填写密码');  
             $(".error_msg").show().fadeOut(2000);  
             $('input[name=passwd]').focus();  
             return false;  
         }  
   
         // 异步提交  
         $.post('url', 'username=' + username + '&password=' + passwd + '&remember=' + remember, function(json) {  
   
             // 验证失败  
             if (json.status == 0) {  
                 $(".error_msg").html(json.message);  
                 $(".error_msg").show().fadeOut(2000);  
   
             // 成功  
             } else {  
                 console.log('success');  
                 //location.href = '';  
             }  
         }, 'json')  
     })  
 });  
   
 // 判断回车  
 function keydown(e){  
     var e = e || event;  
     if (e.keyCode==13) {  
         $(".btn_login").click();  
     }  
 }  
 

认真看了下js验证代码后，应该知道有个remember变量，这个就是记住密码的，传到后台，php脚本通过接收该值，如果为1则说明需要记住密码，这里的技术点主要是php的一个方法setcookie ( string $name [, string $value [, int $expire = 0 [, string $path [, string $domain [, bool $secure = false [, bool $httponly = false ]]]]]] )，记住密码就利用了其中的第三个参数expire，西安嘉信铁路器材有限公司官网（http://www.xianjiaxin198.com/）那么在接收值为1时，便设置expire相关的过期时间，一般为1天也就是 setcookie('id',1,strtotime('+1 days')),同时要注意，由于cookie是存放在客户端的，因此那个id的值应该要加密，也就是存储的加密，提取的依据存储时加密规则反着来提取既可。记住密码后，那么下次再登陆时，便可以在相关的方法里这么写着

 
  // 首页登录  
 public function index() {  
   
     if (isLogin()) {  
         echo 'you have already login in';  
     } else {  
         $this->display();  
     }  
 }  
 