返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
PHPCMS当前位置:首页 > cms教程 > 综合cms > PHPCMS > 正文

phpcms后台登录时用ajax实现实时校验验证码

发布时间:2020-09-07 09:10:16   来源:   点击:
phpcms v9后台登录的时候,无法立即验证验证码是否正确,必须提交登录之后才能确定,这就很耽误时间了,所以对验证码做了个改造,用ajax实时校验验证码。

1、找到\phpcms\modules\admin\templates\login.tpl.php

(1)首先在最上面title之后引入jquery.js
  1. <script language="javascript" type="text/javascript" src="<?php echo JS_PATH?>jquery.min.js"></script> 

(2)由于官方默认的登录按钮是图片按钮,按钮状态变化不明显,稍作改造找到css代码大概19行:
  1. .login_tj_btn{ background:url(<?php echo IMG_PATH?>admin_img/login_dl_btn.jpg) no-repeat 0px 0px; width:52px; height:24px; margin-left:16px; border:none; cursor:pointer; padding:0px; float:right;} 
改成:
  1. .login_tj_btn{ width:55px; height:26px; margin-left:16px; border:none; cursor:pointer; padding:0px; float:right; background-color: #fff; border-radius: 1px; font-weight: bold; color: #111;} 
另外:.login_iptbox .ipt_reg的css里边的 margin-right:16px改成6px,否则位置可能不够
然后给40行左右的登录按钮的value添加“登录”两字即:
  1. <input name="dosubmit" value="登 录" type="submit" class="login_tj_btn" /> 

(3)找到代码:(40行左右)
  1. <div id="yzm" class="yzm"
在这之前加入代码:
  1. <label id="status"></label> 

(4)在最下边加入jq代码:
  1. <script> 
  2.     $(function(){ 
  3.         var imgPath = "<?php echo IMG_PATH?>"
  4.         $("input[name=dosubmit]").attr('disabled',true).css({'background-color' : '#eee','color':'#999797'}); 
  5.         //通过监听input输入框判断 
  6.         $("input[name=code]").bind("input propertychange",function(){ 
  7.             var code = $.trim($(this).val()); 
  8.             if(code == "" || code.length == 0){ 
  9.                 $("input[name=code]").css('border','solid 1px red').focus(); 
  10.                 $("#status").html("<img src='"+imgPath+"cuo.png'>"); 
  11.                 $("input[name=dosubmit]").attr('disabled',true).css({'background-color' : '#eee','color':'#b3b2b2'}); 
  12.             }else if(code.length != 4){ 
  13.                 $("input[name=code]").css('border','solid 1px red').focus(); 
  14.                 $("#status").html("<img src='"+imgPath+"cuo.png'>"); 
  15.                 $("input[name=dosubmit]").attr('disabled',true).css({'background-color' : '#eee','color':'#b3b2b2'}); 
  16.            }else
  17.                 $.ajax({ 
  18.                     url:"<?php echo SITE_PROTOCOL.SITE_URL.WEB_PATH;?>api.php?op=checklogincode"
  19.                     dataType:"json"
  20.                     data: {'code': code}, 
  21.                     type:'post'
  22.                     success:function(data){ 
  23.                         if(data){ 
  24.                             $("input[name=code]").css('border','none'); 
  25.                             $("#status").html("<img src='"+imgPath+"dh.png'>"); 
  26.                             $("input[name=dosubmit]").attr('disabled',false).css({'background-color' : '#fff','color':'#111'}); 
  27.                         }else
  28.                             $("input[name=code]").css('border','solid 1px red').focus(); 
  29.                             $("#status").html("<img src='"+imgPath+"cuo.png'>"); 
  30.                             $("input[name=dosubmit]").attr('disabled',true).css({'background-color' : '#eee','color':'#b3b2b2'}); 
  31.                         } 
  32.                    } 
  33.                 }); 
  34.            } 
  35.         }) 
  36.     }); 
  37. </script> 

2、在根目录下的api文件夹里边创建文件:checklogincode.php,添加如下代码:
  1. <?php 
  2. defined('IN_PHPCMS') or exit('No permission resources.');  
  3.  
  4. $session_storage = 'session_'.pc_base::load_config('system','session_storage'); 
  5. pc_base::load_sys_class($session_storage); 
  6. $isok = 0; 
  7. $code = trim($_POST['code']); 
  8. if(!isset($code) || empty($code)) $isok = 0; 
  9. if ($_SESSION['code'] == strtolower($code)) { 
  10.     $isok = 1; 
  11.     //$_SESSION['code'] = ''; 
  12. }else
  13.     $isok = 0; 
  14. echo $isok; 

3、需要上传一个图标:cuo.png(√图标已经存在了即dh.png)

下载传到phpcms\statics\下即可

更新后台页面登录测试效果



相关栏目
热门文章
最新图文
评论排行
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814