1. 云栖社区>
  2. PHP教程>
  3. 正文

PHP+jQuery 注册模块的改进(一):验证码存入SESSION

作者:用户 来源:互联网 时间:2017-12-01 16:08:55

验证码

PHP+jQuery 注册模块的改进(一):验证码存入SESSION - 摘要: 本文讲的是PHP+jQuery 注册模块的改进(一):验证码存入SESSION,需要修改的几个文件:①register.php 生成随机数和加密值把register.html改为register.php,并开启session;把register.js中生成随机数的函数写在register.php中,并改用php方法&l

需要修改的几个文件:

①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
<?phpsession_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'];


显示的效果如图:
<a href=PHP+jQuery 注册模块的改进(一):验证码存入SESSION">总结:

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

用图可表示为:
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
(未完待续)

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索验证码 ,以便于您获取更多的相关知识。