TP5.0框架下的think-captcha验证码扩展包

之前在进行前端登陆页面实现的过程中,用到了TP5.0自带的think-captcha验证码包,现在在这里补充上介绍和用法。

首先,如果你是TP5.05之前的版本,需要自己去下载captcha,如果想从通过命令行直接下载需要安装composer,5.05之后的版本会自带think-captcha包。

thinkphp\vendor\topthink\think-capcha

1.html中验证码的显示:

<div>{:captcha_img()}</div>


<div><img src="{:captcha_src()}" alt="captcha" /></div>

2.验证码判断

js方法:

function check_verify($code, $id = ''){
    $captcha = new Captcha();
    return $captcha->check($code, $id);
}


或直接在php中使用tp5.0封装的 captcha_check()方法来判断用户输入的验证码是否正确

3.验证码配置

config.php

通过对验证码配置的修改可以实现自定义验证码。

4.博主实现的验证码实例:

点击图片可以切换验证码:

实现验证码随机切换:

在点击img图片时,把当前验证码图片加一个随机数,从而切换成任意新的验证码图片

代码:

.html:

<div class="form-bottom">
                            <form role="form" action="{:url('check')}" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="name" placeholder="用户名/邮箱/手机号" class="form-control" id="form-username">
                                    <div class="loginerror" style="display: none;">用户名不存在</div>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="pass" placeholder="密码" class="form-password form-control" id="form-password">
                                </div>
 
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Code</label>
                                    <input type="text" name="code" placeholder="验证码" class="form-password form-control" id="form-code">
                                    <img src="{:captcha_src()}" alt="captcha" οnclick="this.src=this.src+'?'+Math.random()" style="margin: 5px;height: 50px;width: 200px;"/>
                                </div>
                                <div class="form-group">
                                    <label class="radio-inline">
                                        <input type="radio" name="r" id="r1" value="option1" checked> 用户
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="r" id="r2"  value="option2"> 管理员
                                    </label>
                                </div>
<!--                                 <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="user" id="r1" value="user" checked>用户
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="manager" id="r2" value="manager">管理员
                                    </label>  
                                </div> -->
                                <button type="submit" class="btn">登陆</button>
                                <div>
                                    <p id="form-p"><a href="#">忘了密码?</a> | <a href="../register/register.html">注册账号</a> | <a href="../register/test.html">意见反馈</a></p>
                                </div>
                            </form>


.php:

    public function checkCode(){
        $code=input('post.code');
 
        //验证码判断
        if(captcha_check($code)){
            //echo"验证码正确";
            //echo"<hr>";
            echo "<script>alert('登陆成功!!!!!!!!!!');</script>";
            return true;
        }
        else{
            echo "<script>alert('验证码错误');history.go(-1);</script>";
 
            return false;
        }
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值