前言:
验证码是我们互联网生活中非常常见的一个事物,我们开发人员也经常会写,没有验证码的系统是不安全的.我们平时使用ThinkPHP框架来开发,框架为我们准备了验证码的组件,今天我们来看看如何使用tp5的验证码
目录:
- 验证码的呈现
- 验证码的刷新
- 验证码的验证
1.验证码的呈现
首先我们tp5框架并没有直接封装验证码,我们需要composer来引入这个扩展组件.
//命令为
composer require topthink/think-captcha
引入之后,我们的扩展目录中就会出现我们安装的验证码扩展目录
image.png
在使用验证码之前,我们可以通过手册发现验证码有哪些配置
image.png
这些配置有几种配置方式
- 创建验证码对象时,将配置数组传入
$config = [
// 验证码字体大小
'fontSize' => 30,
// 验证码位数
'length' => 3,
// 关闭验证码杂点
'useNoise' => false,
];
$captcha = new Captcha($config);
- 在config.php中,直接以captcha命名的配置中直接配置
image.png
因为一个站点通常使用一种验证码,所有推荐大家使用第二种方式
配置好了,我们就可以来使用它了,首先我们需要写一个html页面
简单写个登陆页面,这我就多说了
我们直接说验证码的显示
- 写一个img标签,在src中赋值
< img src="{:captcha_src()}" id="captcha" alt="看不清楚点击换图">
- 直接使用封装好的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验证码的介绍了就写到这里了,如果有什么地方不对,希望大神指正.谢谢
以上
网友评论