PHP+jQuery 注册模块开发详解(7)

<div class="ipt iptend">
  <input type='text' id='yzm' name='yzm' placeholder="验证码">
  <img id='yzmpic' src='' style="cursor:pointer"> <!-- 验证码图片 -->
  <a style="cursor:pointer" id='changea'>
    <img id="refpic" src="images/ref.jpg" alt="验证码"> <!-- 验证码刷新按钮图片 -->
  </a>
  <span id='yzmchk'></span>
  <input type='hidden' id='yzmHiddenNum' name='yzmHiddenNum' value=''> <!-- 隐藏域，内容是验证码输出的数字，用户输入的字符与其进行对比 -->
</div>

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

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

        tmp = Math.ceil(Math.random() * 15);//Math.ceil上取整；Math.random取0-1之间的随机数
        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;
        }

        $('#yzmpic').attr("src","../valcode.php?num="+num);
      }
      $('#yzmHiddenNum').val(num);
    }

    //生成验证码以及刷新验证码
    showval();
    $('#yzmpic').click(function(){
    
      showval();
    });
    $('#changea').click(function(){
    
      showval();
    });

    //验证码检验
    function yzmchk(){
    
      if($("#yzm").val() == ""){
      
        var errorMsg = '验证码不能为空';
        error($("#yzmchk"),errorMsg);
      }else if($("#yzm").val().toLowerCase()!=$("#yzmHiddenNum").val()){
      
        //不区分大小写
        var errorMsg = '请输入正确的验证码';
        error($("#yzmchk"),errorMsg);
      }else{
      
        success($("#yzmchk"),"");

        yzmval = true;
      }
    }

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

<?php 

  header("content-type:image/png");
  $num = $_GET['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);
?>