tp6模版验证码及验证码点击刷新


背景:
官方提供的文档安装验证码,但发现没有点击刷新功能

tp6验证码


场景:

我的这个项目是使用tp6模版,tp6多应用


安装


首先使用Composer安装think-captcha扩展包:

在项目根目录执行composer命令

composer require topthink/think-captcha

在index模块控制器创建验证码显示路由:

可以根据自己情况来放,记住路由地址就可,等下使用到

<?php


namespace app\index\controller;


class CaptchaTool
{

    public function verify()
    {
        return \think\captcha\facade\Captcha::create();
    }

}

渲染页面 分两步:
1、第一步HTML

<img src="{:url('CaptchaTool/verify')}" alt="验证码"  id="captcha" />

注意这个 

id="captcha"

这是用来接收点击事件 且 查找验证码图片用来替换

2、第二步 JavaScript代码、我这里使用了jQuery【如果你没用使用jQuery,自己引用或者把写法换成js也行】

点击事件,并且替换验证码图片地址

<script>
    /**
     * 验证码点击刷新
     */
    $("#captcha").click(function(){
        let url = "{:url('CaptchaTool/verify')}";
        $('#captcha').attr('src',url+'?id=' + Math.random());
        return true; // 阻止默认 form 跳转
    });
</script>