先上个效果图

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("验证码错误");
}

-End-