html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img, input {
vertical-align: middle;
}
.vcode {
cursor: pointer;
}
</style>
</head>
<body>
<h3>注册新用户</h3>
<form action="3_register.php">
用户名:<input name="uname"><br/>
密码名:<input name="upwd"><br/>
验证码:<input name="vcode">
<img class="vcode" src="vcode.php"><br>
<input type="submit">
</form>
<script>
var vcode = document.querySelector('.vcode');
vcode.onclick = function(){
//若URL没有改变,浏览器不会重发请求
//this.src = 'vcode.php';
//必须保证URL值改变,浏览器才会发请求
this.src = 'vcode.php?_='+Math.random();
}
</script>
</body>
</html>
register.php
<?php
/***
*接收客户端提交的注册信息,验证提交的随机验证码是否有效
*若有效,则保存入数据库
*/
header("Content-Type: application/json");
@$n = $_REQUEST['uname'] or die('{"code":-2, "msg":"uname required"}');
@$p = $_REQUEST['upwd'] or die('{"code":-3, "msg":"upwd required"}');
@$v = $_REQUEST['vcode'] or die('{"code":-4, "msg":"vcode required"}');
session_start();
$vs = $_SESSION['vcode_in_server'];
//判断客户端提交的验证码与服务器端保存验证码是否一致
if(strtoupper($v)!==strtoupper($vs)){
die('{"code":-9,"msg":"vcode invalid"}');
}
//所有的验证通过了,开始执行数据库INSERT
//INSERT INTO user VALUES(NULL, '$n', '$p');
$output = [
'request'=>$_REQUEST,
'session'=>$_SESSION
];
echo json_encode($output);
随机生成验证码图片的vcode.php
<?php
header('Content-Type: image/png');
//在服务器端内存中生成一张随机验证码图片
$w = 80;
$h = 20;
$img = imagecreatetruecolor($w, $h);
//为图片生成随机的背景颜色——绘制矩形
$c = imagecolorallocate($img,rand(180,240),rand(180,240),rand(180,240));
imagefilledrectangle($img,0,0,$w, $h, $c);
//绘制四个随机的字符
$pool = 'ABCEFGHJKLMNPQRSTWXY23456789';
$vcode = '';
for($i=0; $i<4; $i++){
$s = $pool[rand(0, strlen($pool)-1)]; //随机字符
$vcode .= $s; //保存所有的字符
$fs = rand(12, 24); //随机的字体大小
$an = rand(-45,45); //随机旋转角度
$x = $i*20+5; //每个字符的X坐标
$y = rand(12, 22); //每个字符的Y坐标
$c = imagecolorallocate($img,rand(80,180),rand(80,180),rand(80,180));
$font = 'simhei.ttf';
imagettftext($img,$fs,$an,$x,$y,$c,$font,$s);
}
//为了在下一个页面:register.php页面使用该验证,判断用户输入是否正确
//必须把此处生成的随机验证码保存在当前客户端所对应的session空间中
session_start();
$_SESSION['vcode_in_server'] = $vcode;
//绘制5条随机干扰线
for($i=0; $i<5; $i++){
$c = imagecolorallocate($img,rand(20,240),rand(20,240),rand(20,240));
imageline($img, rand(0,$w),rand(0,$h),rand(0,$w),rand(0,$h),$c);
}
//绘制50个杂色点——半径为1的圆
for($i=0; $i<50; $i++){
$c = imagecolorallocate($img,rand(20,240),rand(20,240),rand(20,240));
imagearc($img,rand(0,$w),rand(0,$h),1,1,0,360,$c);
}
//把服务器内存中的图片输出给客户端
imagepng($img);
//从服务器内存中删除图片
imagedestroy($img);