search
Home类库下载PHP类库thinkphp verification code

thinkphp verification code

Oct 09, 2016 pm 01:33 PM

thinkphp自带验证码

前端页面:

<div style="position:absolute;z-index:3;top:160px;left:180px;">
    <img  src="/static/imghwm/default1.png"  data-src="{:U(&#39;Verify&#39;)}"  class="lazy"    style="max-width:90%"  onclick="this.src=this.src+&#39;?&#39;+Math.random()" id="safecode" style="height:50px;width:70%;"/ alt="thinkphp verification code" ></div>
//验证码判断
 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);
    }

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

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;});  
        }

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>


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.