很多注册登录界面都会验证码，用tp如何实现验证码的功能呢？

在tp中：Think\Verify类可以支持验证码的生成和验证功能。

首先，看一下逻辑：

（1）如何生成？------ 先做Yanzhengma控制器，调用Yanzheng操作方法显示页面；

（2）如何生成？------ 显示页面的图片路径要指向当前控制器下面的yzm操作方法，用于生成验证码；

（3）如何验证？------ 点击“验证”按钮，用ajax访问当前控制器下面的yz操作方法,进行验证；

（4）如何刷新验证码？----- 点击图片再次获取路径；

（5）多个验证码如何验证？ ------- 在生成验证码时，就给一个标识；

（6）控制验证码的属性 ------ 字体大小、背景图片、中英文等

 第一步：生成验证码

yanzheng.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="__ROOT__/Public/js/jquery-1.11.2.min.js"></script>

	</head>

	<body>

		<!--a,c,m-->

		<h1>验证码</h1>

		<img src="__CONTROLLER__/yzm">

		<input  type="text" name="yzm" id="txt"/>

		<input type="button" value="验证" id="btn" />

	</body>

</html>

　　YanzhengmaController.clas

<?php

namespace Ceshi\Controller;

use Think\Controller;

class YanzhengmaController extends  Controller

{

	public function yanzheng()

	{

		$this->show();

	}

	public function yzm(){

//清除缓存，显示验证码，有的不用写这就话就可以显示验证码，我的不行，所以写上了

		ob_clean();

		$v = new \Think\Verify();

		$v->entry();

	}

}

　　

　　

第二步：判断验证码

yanzheng.html

<script type="text/javascript">

		$("#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>

　　YanzhengmaController.class.php

public function yz(){

		//取值

		$yzm = $_POST["yzm"];

		$v = new \Think\Verify();

		//check()方法检验验证码是否正确

		if($v->check($yzm)){

			$this->ajaxReturn("OK","eval");  //如果正确，返回ok

		}else{

			$this->ajaxReturn("NO","eval"); //如果不正确，返回no

	　　　　　　　　}

	}

　　效果图：

当输入不正确的验证码时：

当输入正确的验证码时：

第三步：实现点击验证码图片进行刷新

	$("img").click(function(){

			$(this).attr("src","__CONTROLLER__/yzm");

		})

　　

给图片加上点击事件，每次点击图片重新传一次地址；这样便可以实现刷新了，但是这一代码在ie浏览器中不行：

原因：ie浏览器会自动识别相同的路径，如果相同会直接加载缓存文件，因此需要每次传的路径不同，用随机数做

		$("img").click(function(){

		//取随机数

	      var sjs = Math.floor(Math.random()*100);

		$(this).attr("src","__CONTROLLER__/yzm/code/"+sjs);

		})

　　

第四步：如何进行多个验证码的验证？

当有多个验证码时，

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">

　　在生成验证码时：要传入可标识的信息

YanzhengmaController.class.php

		public function yzm(){

		ob_clean();

		$v = new \Think\Verify();

		$v->entry(1);

	}

			public function yzm2(){

		ob_clean();

		$v = new \Think\Verify();

		$v->entry(2);

	}

　　

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

	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

		}

	}

　　

这样就可以区别要验证的是哪一个验证码了。

第五步：对验证码属性进行修改（切换中文）

public function yzm(){

		ob_clean();

		$v = new \Think\Verify();

		$v->useImgBg =true;      //是否启用默认背景，默认false

		$v->fontSize = 30;      //验证码字体大小（像素） 默认为25

		$v->useCurve = false;  //是否使用混淆曲线 默认为true

		$v->useNoise = false; //是否添加杂点 默认为true

		$v->imageW = 250;    //验证码宽度 设置为0为自动计算

		$v->imageH = 80;    //验证码高度 设置为0为自动计算

		//切换中文

		//首先就中文字体（格式是ttf）的移动到Library/Think/Verify/zhttfs文件夹中

		$v->useZh = true;   //是否使用中文验证码

		$v->fontttf = "simhei.ttf";   //指定验证码字体 默认为随机获取

		$v->entry();

	}

　　

注：在Verify.class.php中可以修改要随机显示的英文和中文字：

其中，codeSet 是英文； zhSet 是中文；如果想要使生成的验证码是自己喜欢的英/中文文章里的文字，可以在此处修改。

tp框架---验证码详解的更多相关文章

  1. Hadoop 新 MapReduce 框架 Yarn 详解

    Hadoop 新 MapReduce 框架 Yarn 详解: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ Ap ...

  2. 测试框架mochajs详解

    测试框架mochajs详解 章节目录 关于单元测试的想法 mocha单元测试框架简介 安装mocha 一个简单的例子 mocha支持的断言模块 同步代码测试 异步代码测试 promise代码测试 不建 ...

  3. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  4. Android热门网络框架Volley详解[申明：来源于网络]

    Android热门网络框架Volley详解[申明:来源于网络] 地址:http://www.cnblogs.com/caobotao/p/5071658.html

  5. 【python3+request】python3+requests接口自动化测试框架实例详解教程

    转自:https://my.oschina.net/u/3041656/blog/820023 [python3+request]python3+requests接口自动化测试框架实例详解教程 前段时 ...

  6. python+requests接口自动化测试框架实例详解

    python+requests接口自动化测试框架实例详解   转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实 ...

  7. redux-saga框架使用详解及Demo教程

    redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用,因为dva框架中effects模块设计到了redux-saga中的知识点,可能有的同学们会用dva框 ...

  8. tp框架 验证码的应用注意事项

    1如何点击更换二维码 二维码是img标签的src访问生成二维码的方法.绑定点击事件,ajax的get方式请求生成二维码的函数.在U函数后面加上任意不重复的参数 如  ?rand=’+math.rand ...

  9. Quartz.net开源作业调度框架使用详解

    前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron-like表达式,集群,数据库.功能性能强大更不 ...

随机推荐

  1. iOS安全攻防之使用 Charles 进行网络数据抓包 和 Paros 网络抓包

    Charles 是 Mac 系统下常用的网路抓包工具(Paros 也不错),windows 下常用 fiddler.正版的 Charles 是收费的(PS:支持正版),天朝人民比较喜欢破解版的Char ...

  2. Linux网络原理及基础设,yum管理RPM包

    一:ifconfig命令 1,ifconfig命令的功能:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址. 2. 使用ifup和ifdown命令启动和停止网卡(详见linux系统管理P42 ...

  3. cookie创建，删除

    Cookie 历来指就着牛奶一起吃的点心.然而,在因特网内,“Cookie”这个字有了完全不同的意思.那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览 ...

  4. java利用WatchService实时监控某个目录下的文件变化并按行解析（注：附源代码）

    首先说下需求:通过ftp上传约定格式的文件到服务器指定目录下,应用程序能实时监控该目录下文件变化,如果上传的文件格式符合要求,将将按照每一行读取解析再写入到数据库,解析完之后再将文件改名. 一. 一开 ...

  5. JavaScript数组基础及实例

    js数组 和var i=1;这样的简单存储一样是js中的一种数据结构,是专门用来存储多个数据的一种数据结构. 摘:数组是一组数据的集合,其表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内 ...

  6. Java基础——抽象类和接口

    之所以将抽象类和接口放在一起做笔记,是因为他们之间很难区分又各自独立.在学习完Java程序设计的三大特点(封装.继承.多态)之后,我最大的收获是,慢慢理解了Java语言这种面向对象程序设计的优越性,它 ...

  7. Django rest framework 自定义Exception

    使用Dango rest framework时,有时需要raise APIException到前端,为了统一错误返回格式,我们需要对exception的格式进行调整. 方法: 1. 在project/ ...

  8. Java IO学习笔记三

    Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...

  9. python 最佳实践与资源汇总

    python 最佳实践 (部分) 一. 结构化工程 文件 功能 README.rst readme LICENSE 许可证 setup.py 打包和发布管理 requirements.txt 开发依赖 ...

  10. 《HelloGitHub》第 15 期

    公告 这段时间没怎么写文章,跑去写 https://hellogithub.com 这个网站了,现在已经顺利上线,功能后面会持续迭代. 最后,这个 https://hellogithub.com 网站 ...