tp框架实现验证码

Posted 亮瞎我的猫眼。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tp框架实现验证码相关的知识,希望对你有一定的参考价值。

今天来看一个小插件。

tp框架是怎么实现验证码的。

又到了我们千篇一律的时候了,首先呢,先做一个用来显示的html界面名为:zhuce.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="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
</head>

<body><!--form表单post方式传值-->
<form action="__ACTION__" method="post">
<!--文本框-->
<input type="text" name="yzm" />
<!--验证码图片-->
<img src="__CONTROLLER__/yzm" id="img" />
<div><input type="submit" value="验证" /></div>

</form>
</body>
</html>

接下来我们就要去后台写验证码的代码了,是不是很期待?

往哪里提交,就在哪里验证

<?php
namespace Home\\Controller;
use Think\\Controller;
class TestController extends Controller
{    
        //验证码
        public function zhuce()
    {
        if(empty($_POST))
        {
            $this->show();
        }
        else
        {
            $verify = new \\Think\\Verify();    
            var_dump($verify->check($_POST["yzm"]));        //check方法里面的第一个参数为用户输入的字符串;第二个参数为$id,标识。
            //这个地方可以用var_dump()方法输出一下进行检测验证码是否输入正确
        }
    }
    
    public function yzm()
    {
        $Verify = new \\Think\\Verify();
        $Verify->fontSize = 20;        //字体大小
        $Verify->length   = 3;        //显示字符数
        $Verify->fontttf = "5.ttf";            //定义字体
        //$Verify->useImgBg = true;         //定义背景图
        $Verify->useZh = true;         //启用中文验证码(必须引入中文字体文件)
        $Verify->fontttf = "simhei.ttf";    //显示的中文字体类型
        $Verify->entry();
    }
}    

这里可以用不同的方法,给图片设置不同的样式

现在就可以显示验证码了:

 

我们再来做一下点击图片切换验证码,只用简单的jquery就可以。

zhuce.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="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
</head>

<body><!--form表单post方式传值-->
<form action="__ACTION__" method="post">
<!--文本框-->
<input type="text" name="yzm" />
<!--验证码图片-->
<img src="__CONTROLLER__/yzm" id="img" />
<div><input type="submit" value="验证" /></div>

</form>
</body>
</html>
<script>
$(document).ready(function(e) {
    $("#img").click(function(){
        //因为考虑到浏览器的兼容问题,所以在这里造一个随机数,用随机数来实现点击图片切换。
        var a = Math.ceil(Math.random()*100);
        
        //传一个随机数参数,并无实质作用,只是为了能让浏览器实现点击切换
        $(this).attr("src","__CONTROLLER__/yzm/a/"+a+"");
        })
});

</script>

在这里一定要注意:兼容性问题。如果直接重新定义src的话有的浏览器是不支持的,所以我们要用随机数来实现。

 

OVER.   不难吧。^_^

以上是关于tp框架实现验证码的主要内容,如果未能解决你的问题,请参考以下文章

tp5的验证码点击刷新&看不清 换一张

6月19 使用tp框架生成验证码及文件上传

TP6.0框架-----通过接口返回前端验证码

tp5框架composer安装验证码报错

TP中验证码的实现

ThinkPHP框架之验证码