一、前言

本文已收录于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(); // 启动Session

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $captchaValue = $_POST['captcha'];

    if (isset($_SESSION['captcha']) && strtoupper($captchaValue) === strtoupper($_SESSION['captcha'])) {
        echo 'success';
    } else {
        echo 'error';
    }
}