TP5 验证码功能实现

版权声明:本文为博主原创文章,部分内容为借鉴理解。 https://blog.csdn.net/weixin_35773751/article/details/81408728

参考资料:https://blog.csdn.net/u011415782/article/details/77367280

第一步:安装验证码插件

composer require topthink/think-captcha

//检查是否存在think-captcha包
..\vendor\topthink\think-captcha

第二步:前端设置

//简单的就直接添加 {:captcha_img()} 即可
<p>
    <label class="pass-label">验证码</label>
    <input type="text" name="verifyCode" class="pass-text-input "placeholder="请输入验证码">
    <div>{:captcha_img()}</div>
</p>

第三步:制作局部动态显示

function captcha_img($id = "")
{
    $js_src = "this.src='".captcha_src()."'";
    return '<img src="' . captcha_src($id) . '" alt="点击更新验证码"
     onclick="'.$js_src.'" />';
    //return '![](' . captcha_src($id) . ')';
}

第四步:后台代码验证

 if(request()->isPost()){
    $data = input('post.');
    if(!captcha_check($data['verifyCode'])) {
        // 校验失败
        $this->error('验证码不正确');
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_35773751/article/details/81408728