一、前言

本文已收录于PHP全栈系列专栏：PHP快速入门与实战

在现代互联网应用中，为了防止恶意操作和机器人攻击，常常会使用图片验证码来验证用户的身份。本文将介绍如何使用PHP语言生成图片验证码，并结合前端的jQuery框架实现验证码的输入校验。

二、什么是验证码？

验证码（CAPTCHA）是一种区分计算机程序和人类用户的图灵测试，常用于防止恶意操作和网络爬虫。一般来说，验证码通常由一个随机字符组成的图片和一个输入框组成。用户需要正确地将图片中的字符输入到输入框中，才能通过验证。

在这里插入图片描述

三、PHP生成验证码图像

3.1 生成验证码文字

首先，我们需要生成一个随机的包含数字和字母的字符串作为验证码文字。可以使用以下代码实现：

function generateCode($length) {$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';$code = '';for ($i = 0; $i < $length; $i++) {$code .= $chars[rand(0, strlen($chars) - 1)];}return $code;
}

3.2 创建图像并绘制验证码文字

接下来，我们使用PHP的GD库创建一个空白的图像，并在图像上绘制验证码文字。可以使用以下代码实现：

$code = generateCode(6); // 生成长度为6的验证码文字$width = 120; // 图像宽度
$height = 40; // 图像高度$image = imagecreate($width, $height); // 创建一个空白的图像$background_color = imagecolorallocate($image, 255, 255, 255); // 设置背景色为白色
$text_color = imagecolorallocate($image, 0, 0, 0); // 设置文字颜色为黑色// 在图像上绘制验证码文字
imagettftext($image, 20, 0, 10, 30, $text_color, 'path/to/font.ttf', $code);header('Content-Type: image/png'); // 设置响应头为PNG图片类型
imagepng($image); // 输出图像
imagedestroy($image); // 销毁图像资源

3.3 将验证码存储到Session中

为了校验用户输入的验证码，我们需要将生成的验证码存储到服务器的Session中。可以使用以下代码实现：

session_start(); // 启动Session$_SESSION['captcha'] = $code; // 存储验证码

至此，我们已经成功地生成了一张带有验证码文字的图片，并将验证码存储到了Session中。

四、前端使用jQuery验证输入

在前端页面中，我们需要使用jQuery来验证用户输入的验证码是否正确。

4.1 步骤一：创建HTML结构和CSS样式

首先，我们需要在HTML页面中创建验证码图片和输入框的HTML结构，并为其添加相应的CSS样式。可以使用以下代码实现：

<!DOCTYPE html>
<html>
<head><title>验证码验证示例</title><style>.captcha-img {display: inline-block;margin-bottom: 10px;}.captcha-input {width: 200px;height: 30px;}.captcha-message {color: red;}</style>
</head>
<body><div class="captcha-container"><img src="generate_captcha.php" alt="验证码" class="captcha-img" /><input type="text" name="captcha" class="captcha-input" /><span class="captcha-message"></span></div><button type="button" id="verify-btn">验证</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="verify_captcha.js"></script>
</body>
</html>

4.2 使用jQuery发送AJAX请求进行校验

我们需要使用jQuery来监听点击验证按钮的事件，并通过AJAX请求将用户输入的验证码发送到服务器进行校验。可以使用以下代码实现：

$(document).ready(function() {$('#verify-btn').click(function() {var captchaValue = $('input[name=captcha]').val();$.ajax({url: 'verify_captcha.php',method: 'POST',data: { captcha: captchaValue },success: function(response) {if (response === 'success') {$('.captcha-message').text('');alert('验证码正确！');} else {$('.captcha-message').text('验证码错误，请重新输入！');}}});});
});

4.3 步骤三：服务器端校验验证码

最后，我们需要在服务器端接收并校验用户输入的验证码。可以使用以下代码实现：

session_start(); // 启动Sessionif ($_SERVER['REQUEST_METHOD'] === 'POST') {$captchaValue = $_POST['captcha'];if (isset($_SESSION['captcha']) && strtoupper($captchaValue) === strtoupper($_SESSION['captcha'])) {echo 'success';} else {echo 'error';}
}