首页
所有分类
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 相关文章推荐
将数组写入txt文件 var_export
Apr 21 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
Dec 28 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
Apr 22 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
Nov 07 PHP
php strnatcmp()函数的用法总结
Nov 27 PHP
smarty内置函数foreach用法实例
Jan 22 PHP
PHP session会话操作技巧小结
Sep 27 PHP
php使用file函数、fseek函数读取大文件效率对比分析
Nov 04 PHP
php分页查询mysql结果的base64处理方法示例
May 18 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
Sep 16 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
Jun 10 PHP
YII框架模块化处理操作示例
Apr 26 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
 AD域(1) destoon(1) 子查询(1) Centos(8) Windows server 2012(17) Rewrite(4) 日志格式分析(1) nginx(76) 伪静态(1) 组策略(1)
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
《PHP编程最快明白》第六讲：Mysql数据库操作
2010/11/01 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
从零开始学YII2框架（一）通过Composer安装Yii2框架
2014/08/20 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
JavaScript原型链示例分享
2014/01/26 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
JSONLINT：python的json数据验证库实例解析
2017/11/28 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Diango + uwsgi + nginx项目部署的全过程（可外网访问）
2018/04/22 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python实现人脸签到系统
2020/04/13 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
世界上最大的汽车共享网站：Zipcar
2017/01/14 全球购物
荣耀商城：HIHONOR
2020/11/03 全球购物
料理师求职信
2014/01/30 职场文书
旅游活动总结
2014/08/27 职场文书
十八大宣传标语
2014/10/09 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
ubuntu下常用apt命令介绍
2022/06/05 Servers