效果图如下:
一、首先使用Composer安装验证码扩展包
1、安装composer
2、进入cmd命令窗口
3、修改使用国内composer镜像(国外镜像可能下载速度慢,设置为国内镜像可提高下载速度),在cmd窗口输入以下命令:
composer config -g repo.packagist composer https://packagist.phpcomposer.com
4、利用cmd命令进入tp5目录下,如下图所示:
5、输入以下命令下载thinkphp验证码安装包:
composer require topthink/think-captcha 1.*
(请特别留意captcha的版本,tp5.0的版本是使用1.*,tp5.1的版本是使用2.*!)
二、然后可以进入application/config.php添加配置验证码的格式
三、在前端页面需要显示验证码的位置,补充 {:captcha_src()} 即可
方法一:
<div class="col-sm-2">
<div id="code">{:captcha_img()}</div>
</div>
方法二:
<div class="col-sm-2">
<div><img src="{:captcha_src()}" alt="captcha" id="code" /></div>
</div>
四、点击图片刷新,加上以下代码即可
<script type="text/javascript">
var code = document.getElementById("code");
code.onclick = function(){
this.src = this.src+'?'+Math.random();
}
</script>