关于tp5 验证码-阿里云开发者社区

开发者社区> 开发与运维> 正文

关于tp5 验证码

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

前言:

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

目录:

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

1.验证码的呈现

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

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

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

image.png

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

image.png

这些配置有几种配置方式

  1. 创建验证码对象时,将配置数组传入
$config =    [
    // 验证码字体大小
    'fontSize'    =>    30,    
    // 验证码位数
    'length'      =>    3,   
    // 关闭验证码杂点
    'useNoise'    =>    false, 
];
$captcha = new Captcha($config);
  1. 在config.php中,直接以captcha命名的配置中直接配置
image.png

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

配置好了,我们就可以来使用它了,首先我们需要写一个html页面
简单写个登陆页面,这我就多说了
我们直接说验证码的显示

  1. 写一个img标签,在src中赋值
< img src="{:captcha_src()}" id="captcha" alt="看不清楚点击换图">
  1. 直接使用封装好的captcha_img()方法来显示图片
<div>{:captcha_img()}</div>

这两种方式都可以输出一张验证码,但我们考虑到要刷新验证码,我们选择操作空间更大的第一种方式
然后控制器渲染视图,我就不详细讲了.
我们就可以得到一个有验证码的页面

image.png

2. 验证码刷新

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

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

image.png

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

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

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

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

image.png

3. 验证码的验证

既然有了验证码,我们就得验证它。我们对验证码验证主要是有两个验证,一个就是是否输入验证码,一个是验证码输入是否正确。
tp5中的验证码和其他的验证一样,有多种验证方式,本次介绍的是开发团队比较推荐的验证器类来实现。

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

image.png
image.png

好了我们写好了验证类后,就应该调用验证了
首先我们需要实例化验证器规则

//实例化验证器对象
        $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验证码的介绍了就写到这里了,如果有什么地方不对,希望大神指正.谢谢

以上

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章