TP框架验证码功能

我们在登陆注册的时候，为了保证安全，经常使用到验证码，这可以更好的起到保护作用，来看一下TP框架的验证码功能：

1、首先在Controller文件夹下新建一个TestCroller.class.php文件：

<?php
namespace Home\Controller;
use Think\Controller;
class TestController extends Controller{
    public function yanzheng(){
        $this->show();
    }
    public function yzm(){
        $v = new \Think\Verify();
        //$v->useImgBg = "true";
        //$v->fontSize = "36";
        //$v->imageW = "100";
        //$v->imageH = "30";
        //$v->length = "2";
        $v->entry();//生成验证码
  　　}
}

2、在View文件夹下新建Test文件夹，在里面建一个yanzheng.html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="__ROOT__/Public/js/jquery-3.2.0.min.js"></script>
</head>

<body>
    <h1>验证码</h1>
    <img src="__CONTROLLER__/yzm"/><input type="text" name="yzm" id="txt"/>
    <input type="button" id="btn"  value="验证"/>
</body>
</html>

3、判断验证码：在上面的yanzheng.html页面写一个点击事件，用ajax传值来判断：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="__ROOT__/Public/js/jquery-3.2.0.min.js"></script>
</head>

<body>
    <h1>验证码</h1>
    <img src="__CONTROLLER__/yzm" id="img" /><input type="text" name="yzm" id="txt"/>
    <input type="button" id="btn"  value="验证"/>
</body>
<script>
    $("#btn").click(function(){
        var yzm = $("#txt").val();
        $.ajax({
            url:"__CONTROLLER__/yz",
            data:{yzm:yzm},
            type:"POST",
            dataType:"TEXT",
            success:function(data){
                if(data.trim() == "OK"){
                    alert("成功");
                }
                else{
                    alert("失败");
                }
            }
        });
    })

</script>
</html>

然后再回到控制器写操作方法：

<?php
namespace Home\Controller;
use Think\Controller;
class TestController extends Controller{
    public function yanzheng(){
        $this->show();
    }
    public function yzm(){
        $v = new \Think\Verify();
        //$v->useImgBg = "true";
        //$v->fontSize = "36";
        //$v->imageW = "100";
        //$v->imageH = "30";
        //$v->length = "2";
        $v->entry();//生成验证码
  　　}
      public function yz(){
        $yzm = $_POST["yzm"];
        $v = new\Think\Verify();
        if($v->check($yzm)){//验证
            $this->ajaxReturn("OK","eval");
        }
        else{
            $this->ajaxReturn("NO","eval");
        }
    }   
}

看一下结果：

4、在实际运用中，验证码是可以随意刷新的，如果看不清当前的图片可以点击刷新，便会更换验证码，我们来看一下，只需一句话就可以：

 

$("#img").click(function(){
        var sjs = Math.floor(Math.random()*100);//添加随机数
        $(this) .attr("src","__CONTROLLER__/yzm/code/"+sjs);
    })

最终效果：

5、多个验证码如何验证：

yanzheng.html：

<h1>验证码</h1>
        <img src="__CONTROLLER__/yzm" id="img">              
        <input  type="text" name="yzm" id="txt"/>    
        <input type="button" value="验证" id="btn" />  
        <br /><br />
<!--第二个验证码-->
<img src="__CONTROLLER__/yzm2" id="img">

TestController.class.php：

  public function yzm(){$v = new \Think\Verify();
    $v->entry(1);
}
    public function yzm2(){$v = new \Think\Verify();
    $v->entry(2);
}

判断验证码时；将标识写入check($yzm,1)：

public function yz(){
    //取值
    $yzm = $_POST["yzm"];              
    $v = new \Think\Verify();
    //check()方法检验验证码是否正确
    if($v->check($yzm,2)){
        $this->ajaxReturn("OK","eval");  //如果正确，返回ok
    }else{
        $this->ajaxReturn("NO","eval"); //如果不正确，返回no
    }      
}

 

posted @ 2017-07-11 19:26  梦深深处  阅读(475)  评论(0)  编辑  收藏  举报