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

需要修改的几个文件：

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

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

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

<?php ssion_start();?>....<?php         //生成随机数函数  function showval(){    $num = "";    for($i=0;$i<4;$i++){      $tmp = rand(1,15);      if ($tmp > 9) {        switch ($tmp) {          ca(10):            $num .= 'a';            break;          ca(11):            $num .= 'b';            break;          ca(12):            $num .= 'c';            break;          ca(13):            $num .= 'd';            break;          ca(14):            $num .= 'e';            break;          ca(15):            $num .= 'f';            break;          }        } el {          $num .= $tmp;          }          }      return $num;    }    //生成随机数  $mdnum = md5(showval());    //把随机数和经过加密的随机数都存入ssion  $_ssion['num'] = showval();  $_ssion['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加密的验证码都存入ssion，而客户端验证码图片的src属性的参数则是那个加密过的值，因此在客户端不会出现四位验证码的文字。

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

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

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

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

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

修改为：

ssion_start();header("content-type:image/png");  //ssion中保存生成的4位随机数和经过ms5加密的随机数  if(ist($_ssion['mdnum']) && $_ssion['mdnum']!=""){      $mdnum = $_ssion['mdnum'];        if(ist($_get['num']) && $_get['num']!=""){        //当注册页传递过来的num和ssion中经过加密的随机数相等时      if($_get['num'] == $mdnum){              if(ist($_ssion['num']) && $_ssion['num']!="")          //把ssion中保存的4位随机数赋给$num          $num = $_ssion['num'];      }    }}

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

valcode.php的完整代码为：

<?php   ssion_start();  header("content-type:image/png");  //ssion中保存生成的4位随机数和经过ms5加密的随机数  if(ist($_ssion['mdnum']) && $_ssion['mdnum']!=""){      $mdnum = $_ssion['mdnum'];        if(ist($_get['num']) && $_get['num']!=""){        //当注册页传递过来的num和ssion中经过加密的随机数相等时      if($_get['num'] == $mdnum){              if(ist($_ssion['num']) && $_s我做了一项小实验作文300字sion['num']!="")          //把ssion中保存的4位随机数赋给$num          $num = $_ssion['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));    imagetpixel($numimage, rand()%180, rand()%90, $randcolor);  }    //输出图片  imagepng($numimage);  imagedestroy($numimage);?>

③register.js进行验证

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

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

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

//验证码按钮$("#refpic").hover(function(){          $(this).attr("src","templets/images/refhover.jpg");    },function(){          $(this).attr("src","templets/images/ref.jpg");    }).moudown(function(){          $(this).attr("src","templets/images/refclick.jpg");    }).mouup(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;        }el if(data == 1){                  var noticemsg = '验证码不能为空';          notice($("#yzmchk"),noticemsg);        }el{                  var errormsg = '请输入正确的验证码';          error($("#yzmchk"),errormsg);        }      });          }    //验证码的blur事件    $("#yzm").focus(function(){          var noticemsg = '不区分大小写';      notice($("#yzmchk"),noticemsg);    }).click(funct幼儿园大班教案ion(){          var noticemsg = '不区分大小写';      notice($("yzmdchk"),noticemsg什么是万圣节);    }).keydown(function(){            if(event.keycode == 13){                        //检验        yzmchk();      }    }).keyup(function(){          if(event.keycode == 13){                        //提交        formsub();      }    }).blur(function(){          yzmchk();});

chkyzm.php

<?phpssion_start();header("chart=utf-8");if(ist($_post['yzm']) && $_post['yzm']!=""){  $yzm = $_post['yzm'];  if(ist($_ssion['num']) && $_ssion['num']!=""){    //当输入的验证码和ssion里保存的num一致时    if(strtolower($yzm) == $_ssion['num']){          //输入正确      $state = 0;    }el{          //输入错误      $state = 2;    }  }}el{      //没有输入  $state = 1;}echo $state;?>

refresh.php

<?php ssion_start();//生成验证码function showval(){  $num = "";  for($i=0;$i<4;$i++){    $tmp = rand(1,15);    if ($tmp > 9) {      switch ($tmp) {        ca(10):          $num .= 'a';          break;        ca(11):          $num .= 'b';          break;        ca(12):          $num .= 'c';          break;        ca(13):          $num .= 'd';          break;        ca(14):          $num .= 'e';          break;        ca(15):          $num .= 'f';          break;      }    } el {      $num .= $tmp;    }    }  return $num;}$_ssion['num'] = showval();$_ssion['mdnum'] = md5(showval());echo $_ssion['mdnum'];

显示的效果如图：

总结：

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

用图可表示为：

（未完待续）