首先要保证你已经安装过Composer了,然后打开命令行执行以下语句
composer require topthink/think-captcha=2.0.*
这里有一个很多人不注意的坑,它的扩展包5.1版本的和5.0版本的是不同的命令安装,别安装错了,安错了不能使用,5.0版本的命令安装为如下命令
composer require topthink/think-captcha
安装好之后便可以进行下一步,我们来写个HTML代码,img标签里的src便是用来显示验证码的图片,一定要写对。在img里添加个id和onclick点击事件。
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="verify" placeholder="验证码">
</div>
<img id="verify_img" src="{:captcha_src()}" style="width: 150px;" onclick="refreshVerify()">
</div>
接下来添加一段js代码用于刷新验证码,如下,完成之后验证码便可以通过点击刷新了,
<script>
function refreshVerify() {
var ts=Date.parse(new Date())/1000;//返回当前时间的事件戳除于1000
$("#verify_img").attr("src","/captcha?rand="+ts);//刷新验证码
}
</script>
验证验证码是否正确通过添加一个类继承validate类
写入便可以对验证码进行校验了。
protected $rule = [
'verify' => 'require|captcha',
];