以前输出验证码的时候用过一个方法,在前台用JS生成验证码字符串,再传递到后台用PHP输出验证码图像。这样在验证时就不需要使用$_SESSION传递验证码的值,直接用JS比较生成的字符串和输入的字符串是否相等即可。
本文以实例演示5种验证码,并介绍生成验证码的函数。PHP生成验证码的原理:通过GD库,生成一张带验证码的图片,并将验证码保存在Session中。
1、HTML
5中验证码HTML代码如下:
1
2
3
4
5
6
7
8
|
<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" > |
1
2
3
4
5
|
<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" > |
1
2
3
4
5
|
<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" > |
1
2
3
4
5
|
<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" > |
1
2
3
4
|
<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> |
2、js验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$( function () { $( "#getcode_num" ).click( function () { //数字验证 $( this ).attr( "src" , 'code_num.php?' + Math.random()); }); $( "#chk_num" ).click( function () { var code_num = $( "#code_num" ).val(); $.post( "chk_code.php?act=num" , { code: code_num }, function (msg) { if (msg == 1) { alert( "验证码正确!" ); } else { alert( "验证码错误!" ); } }); }); |
//数字+字母验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$( "#getcode_char" ).click( function () { $( this ).attr( "src" , 'code_char.php?' + Math.random()); }); $( "#chk_char" ).click( function () { var code_char = $( "#code_char" ).val(); $.post( "chk_code.php?act=char" , { code: code_char }, function (msg) { if (msg == 1) { alert( "验证码正确!" ); } else { alert( "验证码错误!" ); } }); }); |
//中文验证码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$( "#getcode_zh" ).click( function () { $( this ).attr( "src" , 'code_zh.php?' + Math.random()); }); $( "#chk_zh" ).click( function () { var code_zh = escape($( "#code_zh" ).val()); $.post( "chk_code.php?act=zh" , { code: code_zh }, function (msg) { if (msg == 1) { alert( "验证码正确!" ); } else { alert( "验证码错误!" ); } }); }); |
//google验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$( "#getcode_gg" ).click( function () { $( this ).attr( "src" , 'code_gg.php?' + Math.random()); }); $( "#chk_gg" ).click( function () { var code_gg = $( "#code_gg" ).val(); $.post( "chk_code.php?act=gg" , { code: code_gg }, function (msg) { if (msg == 1) { alert( "验证码正确!" ); } else { alert( "验证码错误!" ); } }); }); |
//算术验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$( "#getcode_math" ).click( function () { $( this ).attr( "src" , 'code_math.php?' + Math.random()); }); $( "#chk_math" ).click( function () { var code_math = $( "#code_math" ).val(); $.post( "chk_code.php?act=math" , { code: code_math }, function (msg) { if (msg == 1) { alert( "验证码正确!" ); } else { alert( "验证码错误!" ); } }); }); }); |
3、PHP生成验证码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
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 ); //释放图片所占内存 } |
以上内容就是php生成图片验证码-附五种验证码的全部内容,希望大家喜欢。