thinkphp verification code-PHP类库-php.cn

thinkphp verification code

高洛峰

Release： 2016-10-09 13:33:41

Original

1527 people have browsed it

thinkphp自带验证码

前端页面：

<div style="position:absolute;z-index:3;top:160px;left:180px;">
    <img    style="max-width:90%" src="{:U(&#39;Verify&#39;)}" onclick="this.src=this.src+&#39;?&#39;+Math.random()" id="safecode" style="height:50px;width:70%;"/ alt="thinkphp verification code" ></div>

Copy after login

//验证码判断
 public function Verify(){
 ob_clean();
        //显示验证码
        $cfg=array(
            &#39;codeSet&#39;   =>  &#39;0123456789&#39;,    // 验证码字符集合
            &#39;imageH&#39;    => 25,               // 验证码图片高度
            &#39;imageW&#39;    =>  80,               // 验证码图片宽度
            &#39;length&#39;    =>  4,               // 验证码位数
            &#39;fontttf&#39;   =>  &#39;4.ttf&#39;,              // 验证码字体，不设置随机获取
            &#39;fontSize&#39;  =>  10,              // 验证码字体大小(px)
            &#39;useNoise&#39;  =>  false,            // 是否添加杂点
            &#39;useCurve&#39;  =>  false,            // 是否画混淆曲线
            &#39;bg&#39;        =>  array(226,229,236) //背景颜色
            );
        $very=new \Think\Verify($cfg);
        $very->entry();
    } 
//客户端通过ajax，实现校验验证码
    public function checkVerify(){
        $code = I(&#39;get.code&#39;);
        $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[&#39;verify_code&#39;]) {
            echo json_encode(array(&#39;flag&#39;=>1,&#39;cont&#39;=>&#39;验证码正确&#39;));
        }else{
            echo json_encode(array(&#39;flag&#39;=>2,&#39;cont&#39;=>&#39;验证码错误&#39;));
        }
    }
    private function auth_my_code($vry,$str){
        $key = substr(md5($vry->seKey), 5, 8);
        $str = substr(md5($str), 8, 10);
        return md5($key . $str);
    }

Copy after login

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

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

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

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

Copy after login

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

<script type="text/javascript">

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

        //ajax去服务器端校验
        $.ajax({
            url:"__CONTROLLER__/checkVerify",
            data:{&#39;code&#39;:code},
            dataType:&#39;json&#39;,
            success:function(msg){
                if(msg.flag==1){
                  var data= {
                       username:username,
                       password:password
                     };
                     $.ajax({
                             type:"POST",
                             url:"{:U(&#39;Login/Login&#39;)}",
                             data:data,
                             dataType:"json",
                             success:function(msg){
                                 if(msg.RespCode==&#39;000&#39;){
                                     shutdown();
                                     if(msg.org_code==&#39;fcb&#39;){
                                         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{
                           $(&#39;#safecode&#39;).attr("src","/Login/Verify?"+Math.random());
                        NewAlert(2,"验证码有误，请重新输入",null);
                        code_ok = false;
                        $(&#39;#verifyresult&#39;).html(msg.cont).css({&#39;color&#39;:&#39;red&#39;,&#39;font-size&#39;:&#39;12px&#39;});  
                }
            }
        });
});    

</script>

Copy after login