很多注册登录界面都会验证码,用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. LINQ之LINQ to Objects(上)

    LINQ概述 LINQ,语言集成查询(Language Integrated Query),它允许使用C#或VB代码以查询数据库相同的方式来操作不同的数据源. 1.LINQ体系结构 从上图可以看出,L ...

  2. 详细介绍php中的命名空间

    php命名空间的一个最明确的作用是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.上一章节介绍了什么是php命名空间.php官网已很明确的进行了定义并形象化解释,这 ...

  3. python连接sql server数据库实现增删改查

    简述 python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官 ...

  4. Python教程(1.2)——Python交互模式

    上一节已经说过,安装完Python,在命令行输入"python"之后,如果成功,会得到类似于下面的窗口: 可以看到,结尾有3个>符号(>>>).>&g ...

  5. SSO框架介绍前篇

    SSO全程是single sign on,即单点登录,是一种统一认证和授权机制.   单点登录,指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其 ...

  6. Thrift总结(一)介绍

    这段时间,一直在整理公司的内部 rpc 服务接口,面临的一个问题就是:由于公司内部的系统由几个不同的语言编写的.C# ,java,node.js 等,如何实现这些内部系统之间的接口统一调用,确实是比较 ...

  7. Windows server 2008 r2 开启Aero

    1.右键“计算机”----“管理”----“添加功能”,选上“桌面体验”,一般来说要把服务器系统做成工作 站的话,最好再选上“优质WINDOWS音频视频体验”,如果有无线网卡再选上“无线LAN服务”, ...

  8. dedecms的热门标签在那里修改

    很多人都在用dedecms,因为它不但开源,而且功能还很强大.有会员功能,评论功能,问答功能,积分功能,充值卡等.那么我们来看看很多同学在优黔图里面的提的问题-dedecms的热门标签在那里修改? 其 ...

  9. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  10. 两本最近阅读的工具书的记录 关于Python和Linux命令行的 不喜勿喷 只是写给自己用

    <Linux命令行完全技术宝典>读书心得 张栋作者 在学习Linux系统中,我们需要掌握各种管理的方法和技巧,而管理Linux系统最有效的方法就是命令行的控制.而我在图书馆中读到的< ...