我们在登陆注册的时候,为了保证安全,经常使用到验证码,这可以更好的起到保护作用,来看一下TP框架的验证码功能:
1、首先在Controller文件夹下新建一个TestCroller.class.php文件:
<?php namespace HomeController; use ThinkController; class TestController extends Controller{ public function yanzheng(){ $this->show(); } public function yzm(){ $v = new ThinkVerify(); //$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 HomeController; use ThinkController; class TestController extends Controller{ public function yanzheng(){ $this->show(); } public function yzm(){ $v = new ThinkVerify(); //$v->useImgBg = "true"; //$v->fontSize = "36"; //$v->imageW = "100"; //$v->imageH = "30"; //$v->length = "2"; $v->entry();//生成验证码 } public function yz(){ $yzm = $_POST["yzm"]; $v = newThinkVerify(); 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 ThinkVerify(); $v->entry(1); } public function yzm2(){$v = new ThinkVerify(); $v->entry(2); }
判断验证码时;将标识写入check($yzm,1):
public function yz(){ //取值 $yzm = $_POST["yzm"]; $v = new ThinkVerify(); //check()方法检验验证码是否正确 if($v->check($yzm,2)){ $this->ajaxReturn("OK","eval"); //如果正确,返回ok }else{ $this->ajaxReturn("NO","eval"); //如果不正确,返回no } }