QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

PHPCMS

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

 admin  2022-06-01 10:17:13
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\下即可

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



¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《phpcms后台登录时用ajax实现实时校验验证码》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/cms/phpcms/818.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序