ThinkPHP的使用(七)验证码的使用，及Ajax验证

• AdminController.class.php相关代码

//验证码类
public function verifyImg(){
    $cfg=array(
        'imageH'    =>30,          //验证码图片高度
        'imageW'    =>100,         //验证码图片宽度
        'fontSize'  =>  15,        // 验证码字体大小(px)
        'length'    =>  4,         // 验证码位数
        'fontttf'   =>  '4.ttf',   // 验证码字体，不设置随机获取
    );
    //实例化Verify类
    $very=new \Think\Verify($cfg);
    $very->entry();//输出验证码
}

//ajax过来校验验证码
function checkCode(){
    $code=I('get.code');//获得用户输入的验证码
    $vry=new \Think\Verify();
    if($vry->check($code)){
        echo json_encode(array('status'=>1));
    }else{
        echo json_encode(array('status'=>2));
    }
}

• 登录界面模板页

<script type="text/javascript" src="{$Think.config.BACK_JS_URL}jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('form').submit(function(event){
            //判断验证码是否正确，在进行提交（否则组织form表单提交）
            if(code_flag===false){
                event.preventDefault();//阻止form表单提交
            }
        })
    })
</script>
<form action="/subject/brgyhxtx.html" method="post" class="login">
    <input type="text" id="name" name="admin_user" placeholder="用户名:"/><br/>
    <input type="password" id="password" name="admin_pwd" placeholder="密码:"/><br/>
    <input type="text" id="verify" name="captcha" maxlength="4" onkeyup="check_code()" placeholder="验证码:"/>
    ![]({:U('verifyImg')})
    <div id="code_check_result"></div><br/>
    <input type="submit" value="登录" id="btn"/>
</form>
<script type="text/javascript">
    var code_flag=false;//验证码是否通过验证
    function check_code(){
        //获得输入的验证码
        var code=$('#verify').val();
        if(code.length==4){
            //触发ajax
            $.ajax({
                url:"{:U('checkCode')}",
                data:{'code':code},
                type:"get",
                dataType:"json",
                success:function(msg){
                    if(msg.status==1){
                        $("#code_check_result").html("<span style='color:green'>验证码正确</span>");
                        code_flag=true;
                    }else{
                        $("#code_check_result").html("<span style='color:red'>验证码错误</span>");
                        code_flag=false;
                    }
                }
            });
        }
    }
</script>