文章目录
- 一、前言
- 二、什么是验证码？
- 三、PHP生成验证码图像
- 3.1 生成验证码文字
- 3.2 创建图像并绘制验证码文字
- 3.3 将验证码存储到Session中
- 四、前端使用jQuery验证输入
- 4.1 步骤一：创建HTML结构和CSS样式
- 4.2 使用jQuery发送AJAX请求进行校验
- 4.3 步骤三：服务器端校验验证码
- 五、总结
一、前言
本文已收录于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';
}
}
至此，我们已经成功地完成了生成图片验证码并进行校验的功能。
五、总结
本文介绍了如何使用PHP语言生成图片验证码，并结合jQuery实现验证码的输入校验。通过以上步骤，我们可以轻松地在自己的网站中添加验证码功能，提高用户身份验证的安全性。希望本文对您有所帮助！
本文已收录于PHP全栈系列专栏：PHP快速入门与实战 很多精彩内容收录其中，欢迎大家关注。
发表评论 取消回复