以前输出验证码的时候用过一个方法,在前台用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生成图片验证码-附五种验证码的全部内容,希望大家喜欢。