TP5 验证码功能实现

最新推荐文章于 2022-08-19 10:05:52 发布

清风细雨_林木木

最新推荐文章于 2022-08-19 10:05:52 发布

阅读量463

点赞数

分类专栏：前端文章标签： tp5验证码

本文链接：https://blog.csdn.net/weixin_35773751/article/details/81408728

版权

前端专栏收录该内容

412 篇文章 8 订阅

订阅专栏

参考资料：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('验证码不正确');
    }
}