ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功

1. 简介

验证码（CAPTCHA）是一种能够防止自动化程序恶意攻击网站的技术，通过对用户输入的图形验证码进行验证，确保用户的真实性。本文将介绍如何在ThinkPHP5和5.1中实现验证码的生成、使用及点击刷新功能。

2. 验证码生成

2.1 配置文件

首先，在TP5中我们需要打开config.php文件，找到captcha配置项：

'captcha'  => [
    // 验证码字符集合
    'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',
    // 验证码字体大小(px)
    'fontSize' => 25, 
    // 是否画混淆曲线
    'useCurve' => true, 
    // 验证码图片高度
    'imageH'   => 0, 
    // 验证码图片宽度
    'imageW'   => 0, 
    // 验证码位数
    'length'   => 4, 
    // 验证成功后是否重置
    'reset'    => true
],

默认情况下TP5使用数字字母混合的4位验证码。

2.2 生成验证码

我们可以使用TP5封装好的captcha方法来生成验证码图片，代码如下：

// 默认生成的验证码
\think\captcha\Captcha::create();
// 生成指定的验证码
\think\captcha\Captcha::create('ABCD');

生成验证码后，可以通过将验证码图片输出，在浏览器中显示出来，代码如下：

// 输出验证码
\think\captcha\Captcha::create()->entry();

验证码输出后效果如下：


3. 验证码校验

当用户输入验证码后，需要对验证码进行校验，确保用户的真实性。TP5提供了封装好的校验方法，代码如下：

// 校验验证码
$captcha = new \think\captcha\Captcha();
if ($captcha->check(input('post.captcha'))) {
    // 验证码通过
} else {
    // 验证码错误
}

其中，input('post.captcha')为获取用户输入的验证码值。

4. 点击刷新验证码

当用户无法明确识别验证码时，可以点击刷新按钮重新加载验证码。我们可以使用JavaScript实现验证码的点击刷新功能，代码如下：

// 获取图片对象
var captchaImg = document.getElementById('captchaImg');
// 添加点击事件监听器
captchaImg.addEventListener('click', function() {
    // 随机生成URL地址
    this.src = '/captcha?id=' + Math.random();
});

其中，'/captcha'为验证码生成的URL地址，Math.random()为随机生成的参数，防止缓存。

5. 总结

通过上述内容的介绍，我们可以轻松地在TP5或5.1中实现验证码的生成、使用及点击刷新功能。