Generate image verification code with php - five verification codes attached,

Generate image verification code with php - five verification codes attached, _PHP tutorial

WBOY

Release： 2016-07-13 09:44:18

Original

1349 people have browsed it

PHP generates image verification code - five types of verification codes are attached.

I used a method when outputting verification codes before. Use JS to generate the verification code string at the front desk and then pass it on Go to the background and use PHP to output the verification code image. In this way, there is no need to use $_SESSION to pass the value of the verification code during verification, and you can directly use JS to compare whether the generated string and the input string are equal.

This article demonstrates 5 types of verification codes with examples and introduces the function to generate verification codes. The principle of PHP generating verification code: generate a picture with verification code through GD library, and save the verification code in Session.

1. HTML

The HTML code of the verification code in 5 is as follows:

<div class="demo">


 <h3>1、数字验证码</h3>
 <p>验证码：<input type="text" class="input" id="code_num" name="code_num" maxlength="4" /> <img src="code_num.php" id="getcode_num" title="看不清，点击换一张" align="absmiddle" /></p>
 <p><input type="button" class="btn" id="chk_num" value="提交" /></p>
 </div>
 <div class="demo">

Copy after login

 <h3>2、数字+字母验证码</h3>
 <p>验证码：<input type="text" class="input" id="code_char" maxlength="4" /> <img src="code_char.php" id="getcode_char" title="看不清，点击换一张" align="absmiddle" /></p>
 <p><input type="button" class="btn" id="chk_char" value="提交" /></p>
 </div>
 <div class="demo">

Copy after login

 <h3>3、中文验证码</h3>
 <p>验证码：<input type="text" class="input" id="code_zh" maxlength="4" /> <img src="code_zh.php" id="getcode_zh" title="看不清，点击换一张" align="absmiddle" /></p>
 <p><input type="button" class="btn" id="chk_zh" value="提交" /></p>
 </div>
 <div class="demo">

Copy after login

 <h3>4、仿google验证码</h3>
 <p>验证码：<input type="text" class="input" id="code_gg" maxlength="4" /> <img src="code_gg.php" id="getcode_gg" title="看不清，点击换一张" align="absmiddle" /></p>
 <p><input type="button" class="btn" id="chk_gg" value="提交" /></p>
 </div>
 <div class="demo">

Copy after login

<h3>5、算术验证码</h3>
 <p>验证码：<input type="text" class="input" id="code_math" maxlength="4" /> <img src="code_math.php" id="getcode_math" title="看不清，点击换一张" align="absmiddle" /></p>
 <p><input type="button" class="btn" id="chk_math" value="提交" /></p>
</div>

Copy after login

2. js verification

$(function() {
 $("#getcode_num").click(function() { //数字验证
 $(this).attr("src", 'code_num.php&#63;' + Math.random());
 });
 $("#chk_num").click(function() {
 var code_num = $("#code_num").val();
 $.post("chk_code.php&#63;act=num", {
  code: code_num
 },
 function(msg) {
  if (msg == 1) {
  alert("验证码正确！");
  } else {
  alert("验证码错误！");
  }
 });
 });

Copy after login

//Number letter verification

 $("#getcode_char").click(function() {
 $(this).attr("src", 'code_char.php&#63;' + Math.random());
 });
 $("#chk_char").click(function() {
 var code_char = $("#code_char").val();
 $.post("chk_code.php&#63;act=char", {
  code: code_char
 },
 function(msg) {
  if (msg == 1) {
  alert("验证码正确！");
  } else {
  alert("验证码错误！");
  }
 });
 });

Copy after login

//Chinese verification code

 $("#getcode_zh").click(function() {
 $(this).attr("src", 'code_zh.php&#63;' + Math.random());
 });
 $("#chk_zh").click(function() {
 var code_zh = escape($("#code_zh").val());
 $.post("chk_code.php&#63;act=zh", {
  code: code_zh
 },
 function(msg) {
  if (msg == 1) {
  alert("验证码正确！");
  } else {
  alert("验证码错误！");
  }
 });
 });

Copy after login

//google verification

 $("#getcode_gg").click(function() {
 $(this).attr("src", 'code_gg.php&#63;' + Math.random());
 });
 $("#chk_gg").click(function() {
 var code_gg = $("#code_gg").val();
 $.post("chk_code.php&#63;act=gg", {
  code: code_gg
 },
 function(msg) {
  if (msg == 1) {
  alert("验证码正确！");
  } else {
  alert("验证码错误！");
  }
 });
 });

Copy after login

//Arithmetic verification

 $("#getcode_math").click(function() {
 $(this).attr("src", 'code_math.php&#63;' + Math.random());
 });
 $("#chk_math").click(function() {
 var code_math = $("#code_math").val();
 $.post("chk_code.php&#63;act=math", {
  code: code_math
 },
 function(msg) {
  if (msg == 1) {
  alert("验证码正确！");
  } else {
  alert("验证码错误！");
  }
 });
 });
});

Copy after login

3. PHP generates verification code

session_start();
getCode(4,60,20);
function getCode($num,$w,$h) {
 $code = "";
 for ($i = 0; $i < $num; $i++) {
 $code .= rand(0, 9);
 }
 //4位验证码也可以用rand(1000,9999)直接生成
 //将生成的验证码写入session，备验证时用
 $_SESSION["helloweba_num"] = $code;
 //创建图片，定义颜色值
 header("Content-type: image/PNG");
 $im = imagecreate($w, $h);
 $black = imagecolorallocate($im, 0, 0, 0);
 $gray = imagecolorallocate($im, 200, 200, 200);
 $bgcolor = imagecolorallocate($im, 255, 255, 255);
 //填充背景
 imagefill($im, 0, 0, $gray);
 //画边框
 imagerectangle($im, 0, 0, $w-1, $h-1, $black);
 //随机绘制两条虚线，起干扰作用
 $style = array ($black,$black,$black,$black,$black,
 $gray,$gray,$gray,$gray,$gray
 );
 imagesetstyle($im, $style);
 $y1 = rand(0, $h);
 $y2 = rand(0, $h);
 $y3 = rand(0, $h);
 $y4 = rand(0, $h);
 imageline($im, 0, $y1, $w, $y3, IMG_COLOR_STYLED);
 imageline($im, 0, $y2, $w, $y4, IMG_COLOR_STYLED);
 //在画布上随机生成大量黑点，起干扰作用;
 for ($i = 0; $i < 80; $i++) {
 imagesetpixel($im, rand(0, $w), rand(0, $h), $black);
 }
 //将数字随机显示在画布上,字符的水平间距和位置都按一定波动范围随机生成
 $strx = rand(3, 8);
 for ($i = 0; $i < $num; $i++) {
 $strpos = rand(1, 6);
 imagestring($im, 5, $strx, $strpos, substr($code, $i, 1), $black);
 $strx += rand(8, 12);
 }
 imagepng($im);//输出图片
 imagedestroy($im);//释放图片所占内存
}

Copy after login

The above content is the complete content of php generated image verification code - with five verification codes attached. I hope you like it.