thinkphp5框架captcha验证码配置验证以及点击刷新

先上个效果图

1.从composer安装captcha

composer require topthink/think-captcha 1.* -vvv

注意captcha的版本, tp5的版本使用captcha 1.*, tp5.1的版本使用captcha 2.*

2.打开application/config.php配置文件

添加以下代码

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

3.html部分

我这里用的是layui后台模板

<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verifycode"></label>
<input type="text" name="verifycode" id="verifycode" lay-verify="required" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 8px;">
<img src="{:captcha_src()}" class="verifyimg">
</div>
</div>
</div>
</div>

或者下面两种我查到的方法任选一种

<img src="{:captcha_src()}" class="verify" onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()" >
<div class="yzm">
<img src="{:captcha_src()}" class="verify" onclick="resVerify()" alt="验证码" />
<a href="javascript:resVerify();" rel="external nofollow" >看不清，换一张</a>
</div>

4.js部分

这里我以我写的layui那部分html代码为例

var verifyimg = $('.verifyimg').attr('src');
$('.verifyimg').click(function(){
if (verifyimg.indexOf('?') > 0) {
$('.verifyimg').attr('src', verifyimg + '&random=' + Math.random());
}else{
$('.verifyimg').attr('src', verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
}
});

其他方法原理都一样,我就不写了.

5.后台验证部分

这里我以tp5自带的Validate验证器为例,因为比较方便.

$param = request()->post()['data'];
//验证
$validate = new Validate([
'username|用户名' => 'require',
'password|密码' => 'require',
'verifycode|验证码' => 'require|captcha',
]);
if (!$validate->check($param)) {
return json(['code' => 0, 'msg' => $validate->getError()]);
}

查到的其他方法如下:

$captcha=input("captcha");
//验证
if (!captcha_check($captcha)){
exit(json_encode(array('status'=>0,'msg'=>'验证码错误')));
}
 
//或者
 
$captcha = new Captcha();
//验证
if (!$captcha->check(input("captcha"))){
return $this->error("验证码错误");
}