thinkphp验证码

Posted 2020-08-09

thinkphp自带验证码

前端页面：

<div style="position:absolute;z-index:3;top:160px;left:180px;">
    <img style="cursor:pointer; " src="{:U(‘Verify‘)}" onclick="this.src=this.src+‘?‘+Math.random()" id="safecode" style="height:50px;width:70%;"/>
</div>

//验证码判断
 public function Verify(){
 ob_clean();
        //显示验证码
        $cfg=array(
            ‘codeSet‘   =>  ‘0123456789‘,    // 验证码字符集合
            ‘imageH‘    => 25,               // 验证码图片高度
            ‘imageW‘    =>  80,               // 验证码图片宽度
            ‘length‘    =>  4,               // 验证码位数
            ‘fontttf‘   =>  ‘4.ttf‘,              // 验证码字体，不设置随机获取
            ‘fontSize‘  =>  10,              // 验证码字体大小(px)
            ‘useNoise‘  =>  false,            // 是否添加杂点
            ‘useCurve‘  =>  false,            // 是否画混淆曲线
            ‘bg‘        =>  array(226,229,236) //背景颜色
            );
        $very=new \Think\Verify($cfg);
        $very->entry();
    } 
//客户端通过ajax，实现校验验证码
    public function checkVerify(){
        $code = I(‘get.code‘);
        $very = new \Think\Verify();
        $key = $this->auth_my_code($very,$very->seKey);
        // 验证码不能为空
        $secode = session($key);

        //对$code进行加密，在比较校验
        if($this->auth_my_code($very,strtoupper($code)) == $secode[‘verify_code‘]) {
            echo json_encode(array(‘flag‘=>1,‘cont‘=>‘验证码正确‘));
        }else{
            echo json_encode(array(‘flag‘=>2,‘cont‘=>‘验证码错误‘));
        }
    }
    private function auth_my_code($vry,$str){
        $key = substr(md5($vry->seKey), 5, 8);
        $str = substr(md5($str), 8, 10);
        return md5($key . $str);
    }

以上验证码如果输入错误提交后不能自动刷新，对代码进行更改后：

location.href="/Login/Login";这样只能对整个页面刷新，提交表单的值可能会丢失，非常影响用户体验。

2.如果验证码输入错误，提交后自动刷新验证码。

else{
       $(‘#safecode‘).attr("src","/Login/Verify?"+Math.random());
         NewAlert(2,"验证码有误，请重新输入",null);
         code_ok = false;
         $(‘#verifyresult‘).html(msg.cont).css({‘color‘:‘red‘,‘font-size‘:‘12px‘});  
        }

 3.以下为ajax提交验证码到后台校验：

<script type="text/javascript">

$("#login_btn").click(function(){
       var username = $.trim($("#username").val());
       var password = $.trim($("#password").val());
       var code = $(‘#veri‘).val();
        if(username == ""){
            NewAlert(2,"请输入用户名",null);
            shutdown();
            return false;
        }else if(password == ""){
            NewAlert(2,"请输入密码",null);
            shutdown();
            return false;
        }else if(code==‘‘){
            NewAlert(2,"请输入验证码",null);
            return false;
        }

        //ajax去服务器端校验
        $.ajax({
            url:"__CONTROLLER__/checkVerify",
            data:{‘code‘:code},
            dataType:‘json‘,
            success:function(msg){
                if(msg.flag==1){
                  var data= {
                       username:username,
                       password:password
                     };
                     $.ajax({
                             type:"POST",
                             url:"{:U(‘Login/Login‘)}",
                             data:data,
                             dataType:"json",
                             success:function(msg){
                                 if(msg.RespCode==‘000‘){
                                     shutdown();
                                     if(msg.org_code==‘fcb‘){
                                         location.href="/Invest/index?biao_type=cwb";
                                     }else{
                                         location.href="{$Think.config.VIP_URL}/Individual/index";
                                     }
                                 }else{
                                     NewAlert(2,msg.RespDesc,null);
                                     return false;
                                 }
                             },
                             error:function(){
                                 shutdown();
                             },
                             beforeSend: function() {
                                 Loading();
                             },
                         });
                   }else{
                           $(‘#safecode‘).attr("src","/Login/Verify?"+Math.random());
                        NewAlert(2,"验证码有误，请重新输入",null);
                        code_ok = false;
                        $(‘#verifyresult‘).html(msg.cont).css({‘color‘:‘red‘,‘font-size‘:‘12px‘});  
                }
            }
        });
});    

</script>