首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

Posted in PHP onOctober 14, 2014

需要修改的几个文件：

①register.php 生成随机数和加密值

把register.html改为register.php，并开启session；

把register.js中生成随机数的函数写在register.php中，并改用php方法

<?php session_start();?>
....
<?php 
      
  //生成随机数函数
  function showval(){

    $num = "";
    for($i=0;$i<4;$i++){

      $tmp = rand(1,15);
      if ($tmp > 9) {
        switch ($tmp) {
          case(10):
            $num .= 'a';
            break;
          case(11):
            $num .= 'b';
            break;
          case(12):
            $num .= 'c';
            break;
          case(13):
            $num .= 'd';
            break;
          case(14):
            $num .= 'e';
            break;
          case(15):
            $num .= 'f';
            break;
          }
        } else {
          $num .= $tmp;
          }  
        }
      return $num;
    }
  
  //生成随机数
  $mdnum = md5(showval());
  
  //把随机数和经过加密的随机数都存入session
  $_SESSION['num'] = showval();
  $_SESSION['mdnum'] = $mdnum;  
?>
  <!--验证码-->
  <div class="ipt iptend">
    <input type='text' id='yzm' name='yzm' placeholder="验证码" autocomplete="off" />
    <img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' style="cursor:pointer" title="验证码" alt="验证码">
    <a style="cursor:pointer" id='changea'>
      <img id="refpic" src="templets/images/ref.jpg" alt="刷新验证码">
    </a>
    <span id='yzmchk'></span>
  </div>

把生成的4位验证码和经过md5加密的验证码都存入session，而客户端验证码图片的src属性的参数则是那个加密过的值，因此在客户端不会出现四位验证码的文字。

②valcode.php 把随机数写入图形

在register.php中，验证码图片的地址是

<img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' >

因此在valcode.php中，需要做相应修改，修改之处是把原来的：

//直接传送客户端输入的值$num = $_GET['num'];

修改为：

session_start();
header("content-type:image/png");

  //session中保存生成的4位随机数和经过ms5加密的随机数
  if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){
  
    $mdnum = $_SESSION['mdnum'];
    
    if(isset($_GET['num']) && $_GET['num']!=""){
  
      //当注册页传递过来的num和session中经过加密的随机数相等时
      if($_GET['num'] == $mdnum){
      
        if(isset($_SESSION['num']) && $_SESSION['num']!="")

          //把session中保存的4位随机数赋给$num
          $num = $_SESSION['num'];
      }
    }
}

即客户端图片传递过来的加密的参数同session中保存的加密过的值相同时，就把session中保存的4位验证码写入图形。

valcode.php的完整代码为：

<?php 

  session_start();
  header("content-type:image/png");

  //session中保存生成的4位随机数和经过ms5加密的随机数
  if(isset($_SESSION['mdnum']) && $_SESSION['mdnum']!=""){
  
    $mdnum = $_SESSION['mdnum'];
    
    if(isset($_GET['num']) && $_GET['num']!=""){
  
      //当注册页传递过来的num和session中经过加密的随机数相等时
      if($_GET['num'] == $mdnum){
      
        if(isset($_SESSION['num']) && $_SESSION['num']!="")

          //把session中保存的4位随机数赋给$num
          $num = $_SESSION['num'];
      }
    }
  }

  $imagewidth = 150;
  $imageheight = 54;
  
  //创建图像
  $numimage = imagecreate($imagewidth, $imageheight);
  
  //为图像分配颜色
  imagecolorallocate($numimage, 240,240,240); 

  //字体大小
  $font_size = 33;
  
  //字体名称
  $fontname = 'arial.ttf';
  
  //循环生成图片文字
  for($i = 0;$i<strlen($num);$i++){
    
    //获取文字左上角x坐标
    $x = mt_rand(20,20) + $imagewidth*$i/5;
    
    //获取文字左上角y坐标
    $y = mt_rand(40, $imageheight);
    
    //为文字分配颜色
    $color = imagecolorallocate($numimage, mt_rand(0,150), mt_rand(0,150), mt_rand(0,150));
    
    //写入文字
    imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]);
  }
  
  //生成干扰码
  for($i = 0;$i<2200;$i++){
    $randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255));
    imagesetpixel($numimage, rand()%180, rand()%90, $randcolor);
  }
  
  //输出图片
  imagepng($numimage);
  imagedestroy($numimage);

?>

③register.js进行验证

验证部分改为使用Ajax进行验证，把输入的4位验证码传递给chkyzm.php文件，和session中保存的4位验证码进行对比。

刷新图片时，重新生成4位验证码，并和加密验证码一起写入session。重新生成验证码的代码写在了refresh.php中，并在register.js中使用ajax来请求重新生产的4位验证码和加密验证码，并通过jQuery把加密验证码的值作为图片的src属性的参数，经过参数和session比对后valcode.php会重新生成4位验证码的图片

register.js验证码部分的代码为：

//验证码按钮
$("#refpic").hover(function(){
    
      $(this).attr("src","templets/images/refhover.jpg");
    },function(){
    
      $(this).attr("src","templets/images/ref.jpg");
    }).mousedown(function(){
    
      $(this).attr("src","templets/images/refclick.jpg");
    }).mouseup(function(){
    
      $(this).attr("src","templets/images/ref.jpg");
    });
    

    //刷新验证码
    function postyzm(){
    
      $.post("./../refresh.php",function(data,textStatus){
      
        $('#yzmpic').attr("src","valcode.php?num="+data);
      })
    }

    $('#yzmpic').click(function(){
    
      postyzm();
    });

     $('#changea').click(function(){
    
      postyzm();
    });

    //验证码检验
    function yzmchk(){
        
      $.post("./../chkyzm.php",{
            
        //要传递的数据
        yzm : $("#yzm").val()
      },function(data,textStatus){
        
        if(data == 0){
        
          success($("#yzmchk"),"");
          yzmval = true;
        }else if(data == 1){
        
          var noticeMsg = '验证码不能为空';
          notice($("#yzmchk"),noticeMsg);
        }else{
        
          var errorMsg = '请输入正确的验证码';
          error($("#yzmchk"),errorMsg);
        }
      });
      
    }

    //验证码的blur事件
    $("#yzm").focus(function(){
    
      var noticeMsg = '不区分大小写';
      notice($("#yzmchk"),noticeMsg);
    }).click(function(){
    
      var noticeMsg = '不区分大小写';
      notice($("yzmdchk"),noticeMsg);
    }).keydown(function(){
      
      if(event.keyCode == 13){        
        
        //检验
        yzmchk();
      }
    }).keyup(function(){
    
      if(event.keyCode == 13){        
        
        //提交
        formsub();
      }
    }).blur(function(){
    
      yzmchk();
});

chkyzm.php

<?php
session_start();
header("charset=utf-8");

if(isset($_POST['yzm']) && $_POST['yzm']!=""){

  $yzm = $_POST['yzm'];

  if(isset($_SESSION['num']) && $_SESSION['num']!=""){

    //当输入的验证码和session里保存的num一致时
    if(strtolower($yzm) == $_SESSION['num']){
    
      //输入正确
      $state = 0;
    }else{
    
      //输入错误
      $state = 2;
    }
  }
}else{  
  
  //没有输入
  $state = 1;
}
echo $state;
?>

refresh.php

<?php 

session_start();

//生成验证码
function showval(){

  $num = "";
  for($i=0;$i<4;$i++){

    $tmp = rand(1,15);
    if ($tmp > 9) {
      switch ($tmp) {
        case(10):
          $num .= 'a';
          break;
        case(11):
          $num .= 'b';
          break;
        case(12):
          $num .= 'c';
          break;
        case(13):
          $num .= 'd';
          break;
        case(14):
          $num .= 'e';
          break;
        case(15):
          $num .= 'f';
          break;
      }
    } else {
      $num .= $tmp;
    }  
  }
  return $num;
}

$_SESSION['num'] = showval();
$_SESSION['mdnum'] = md5(showval());

echo $_SESSION['mdnum'];

显示的效果如图：

PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

总结：

5个步骤：把4位验证码写入session再生成图片，客户端图片的参数使用加密的验证码，把输入的字符同SESSION中的4位验证码进行比对，刷新图片重新生成4位验证码并存入session，把重新生产的加密验证码作为图片的src参数

用图可表示为：

PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

（未完待续）

PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

- Author -

小dee

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
php实现单链表的实例代码
Mar 22 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
Jun 20 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
Mar 13 PHP
理解PHP中的stdClass类
Apr 18 PHP
linux下安装php的memcached客户端
Aug 03 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
Nov 19 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
Dec 22 PHP
PHP下 Mongodb 连接远程数据库的实例代码
Aug 30 PHP
php+ajax 文件上传代码实例
Mar 18 PHP
php转换上传word文件为PDF的方法【基于COM组件】
Jun 10 PHP
Laravel 登录后清空COOKIE的操作方法
Oct 14 PHP
如何判断微信付款码和支付宝付款码
Apr 01 PHP
PHP+jQuery 注册模块开发详解
Oct 14 #PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
Oct 14 #PHP
php中动态修改ini配置
Oct 14 #PHP
php中的ini配置原理详解
Oct 14 #PHP
9段PHP实用功能的代码推荐
Oct 14 #PHP
五款PHP代码重构工具推荐
Oct 14 #PHP
ThinkPHP 表单自动验证运用示例
Oct 13 #PHP
二级域名(1) 压力测试(1) 443(1) shell(3) URL重定向(3) 跨域(4) 默认端口(3) SSL(3) 前后端分离(1) lamp(1)
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
javascript如何实现create方法
2019/11/04 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Python正则表达式教程之二：捕获篇
2017/03/02 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
我的祖国演讲稿
2014/05/04 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
岳庙导游词
2015/02/04 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
让人瞬间清醒的句子，句句经典，字字如金
2019/07/08 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python