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 相关文章推荐
sqlyog 中文乱码问题的设置方法
Oct 19 PHP
PHP 循环列出目录内容的函数代码
May 26 PHP
超级实用的7个PHP代码片段分享
Jan 05 PHP
zf框架的Filter过滤器使用示例
Mar 13 PHP
CI(CodeIgniter)框架配置
Jun 10 PHP
php生成短域名函数
Mar 23 PHP
php数组比较实现查找连续数的方法
Jul 29 PHP
PHP脚本自动识别验证码查询汽车违章
Dec 20 PHP
PHP文件操作实例总结【文件上传、下载、分页】
Dec 08 PHP
php防止表单重复提交实例讲解
Feb 11 PHP
php5与php7的区别点总结
Oct 11 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
Oct 17 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
You might like
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
法院授权委托书格式
2014/09/28 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
办公用品质量保证书
2015/05/11 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL