前言:

验证码是我们互联网生活中非常常见的一个事物,我们开发人员也经常会写,没有验证码的系统是不安全的.我们平时使用ThinkPHP框架来开发,框架为我们准备了验证码的组件,今天我们来看看如何使用tp5的验证码

目录:

1. 验证码的呈现
2. 验证码的刷新
3. 验证码的验证

1.验证码的呈现

首先我们tp5框架并没有直接封装验证码,我们需要composer来引入这个扩展组件.

//命令为composer require topthink/think-captcha

引入之后,我们的扩展目录中就会出现我们安装的验证码扩展目录

在使用验证码之前,我们可以通过手册发现验证码有哪些配置

这些配置有几种配置方式

1. 创建验证码对象时,将配置数组传入

$config =    [    // 验证码字体大小    'fontSize'    =>    30,        // 验证码位数    'length'      =>    3,       // 关闭验证码杂点    'useNoise'    =>    false, ];$captcha = new Captcha($config);

1. 在config.php中,直接以captcha命名的配置中直接配置

因为一个站点通常使用一种验证码,所有推荐大家使用第二种方式

配置好了,我们就可以来使用它了,首先我们需要写一个html页面

简单写个登陆页面,这我就多说了 我们直接说验证码的显示

1. 写一个img标签,在src中赋值

< img src="{:captcha_src()}" id="captcha" alt="看不清楚点击换图">

1. 直接使用封装好的captcha_img()方法来显示图片

     
      {:captcha_img()}
     

这两种方式都可以输出一张验证码,但我们考虑到要刷新验证码,我们选择操作空间更大的第一种方式

然后控制器渲染视图,我就不详细讲了. 我们就可以得到一个有验证码的页面

2. 验证码刷新

生活中我们肯定会遇到验证码模糊看不清楚的时候,这时站点一般都会提供一个点击刷新的按钮来刷新验证码.

我们首先找到验证码的img 的src

找到这个url之后,我们就可以想办法让它刷新了,根据以往的经验,在验证码的src后面加上一个随机数就可以让验证码刷新

那么下面我们就来写JavaScrip代码

//我们在一个按钮中设置了点击事件    $(function () {            $("#refresh").click(function () {//我们选择通过时间撮来当作我们的随机数                var time=Date.parse(new Date());//将时间戳加入到url地址的路由中                $("#captcha").attr('src','/captcha.html?id='+time);            })    })

这样我们每次点击按钮就会生成新的验证码了

3. 验证码的验证

既然有了验证码，我们就得验证它。我们对验证码验证主要是有两个验证，一个就是是否输入验证码，一个是验证码输入是否正确。

tp5中的验证码和其他的验证一样，有多种验证方式，本次介绍的是开发团队比较推荐的验证器类来实现。

首先，我们需要一个验证器类

好了我们写好了验证类后，就应该调用验证了

首先我们需要实例化验证器规则

//实例化验证器对象        $validate=Loader::validate('验证器类名');

现在我们就获取到了验证器对象，我们只需要调用对象中的验证方法check()就可以验证了

/**     * 数据自动验证     * @access public     * @param array     $data  数据     * @param mixed     $rules  验证规则     * @param string    $scene 验证场景     * @return bool     */    public function check($data, $rules = [], $scene = '')

当我们不传入验证规则时，他会读取对象上的rule属性，也就是我们之前写好的验证规则。如果验证失败的话，check()方法返回false

这时候，我们只需要调用验证器对象上的getError()方法就可以得到提示信息了

//实例化验证器对象        $validate=Loader::validate('User');        if (!$validate->check($data)) {            dump($validate->getError());exit;        }

好了,本次tp5验证码的介绍了就写到这里了,如果有什么地方不对,希望大神指正.谢谢

以上