標籤:ttf bsp xhtml tco 格式 query space highlight 使用
一.單個驗證碼
1.依舊可以沿用上傳功能所建立的控制器TestController.class.php
2.建立操作方法
namespace Home\Controller;use Think\Controller;class TestController extends Controller { public function yanzheng(){$this->show();//顯示模版頁面}}
3.在Home/View/Test下建立驗證的模版頁 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="test" name="yzm" id="txt"/><input type="submit" id="btn" value="驗證"/></body><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("失敗");}}});})$("#img").click(function(){var sjs = Math.floor(Math.random() *100);$(this).attr("src","__CONTROLLER__/yzm/code/"+sjs);})</script></html>
4.建一個操作方法yzm用來產生驗證碼 並且 讓驗證按鈕指向一個操作方法,建立一個yz操作方法
<?phpnamespace Home\Controller;use Think\Controller;class TestController extends Controller { public function yanzheng(){$this->show();//顯示模版頁面}public function yzm(){$v = new \Think\Verify();//造對象//$v->useImgBg = true;//是否使用背景圖片 預設為false//$v->fontSize="30";//驗證碼字型大小(像素) 預設為25//$v->useCurve=false;//是否使用混淆曲線 預設為true//$v->useNoise=false;//是否添加雜點 預設為true//$v->length="4";//驗證碼位元$v->useZh = true;//中文驗證碼$v->fontttf="STKAITI.TTF";$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");}} }
實現的效果如下:
輸入文字後點擊驗證:
二.兩個驗證碼
1.給模版加一個img標籤
<body><h1>驗證碼</h1><img src="__CONTROLLER__/yzm" id="img"/><input type="test" name="yzm" id="txt"/><input type="submit" id="btn" value="驗證"/><img src="__CONTROLLER__/yzm2" id="img2"/></body>
2.控制器的方法也要寫個yzm方法,叫做yzm2,如果有兩個驗證碼,entry就要進行標識,entry(1)entry( 2)
public function yanzheng(){$this->show();//顯示模版頁面}public function yzm(){$v = new \Think\Verify();//造對象//$v->useImgBg = true;//是否使用背景圖片 預設為false//$v->fontSize="30";//驗證碼字型大小(像素) 預設為25//$v->useCurve=false;//是否使用混淆曲線 預設為true//$v->useNoise=false;//是否添加雜點 預設為true//$v->length="4";//驗證碼位元$v->useZh = true;//中文驗證碼$v->fontttf="STKAITI.TTF";$v->entry(1);//產生驗證碼}public function yz(){$yzm = $_POST["yzm"];$v = new \Think\Verify();if($v->check($yzm,1)){//驗證$this->ajaxReturn("ok","eval");}else{$this->ajaxReturn("no","eval");}}public function yzm2(){$v = new \Think\Verify();$v->entry(2);//產生驗證碼}
3.然後在check方法中寫入一個標識,就是要驗證哪一個的標識,這裡驗證是第一個
public function yz(){$yzm = $_POST["yzm"];$v = new \Think\Verify();if($v->check($yzm,1)){//驗證$this->ajaxReturn("ok","eval");}else{$this->ajaxReturn("no","eval");}}
顯示的結果:
注意:有時候瀏覽器不同也會有bug,比如IE瀏覽器就不重新整理,所以我們要加一個東西,讓它適應任何的瀏覽器,可以這樣寫
$("#img").click(function(){var sjs = Math.floor(Math.random() *100);//產生隨機數$(this).attr("src","__CONTROLLER__/yzm/code/"+sjs);//拼接上截取後的隨機數})
三.驗證碼參數
注意:參數的設定有兩種方法
一是執行個體化傳入參數:
$config = array( ‘fontSize‘ => 30, // 驗證碼字型大小 ‘length‘ => 3, // 驗證碼位元 ‘useNoise‘ => false, // 關閉驗證碼雜點);$Verify = new \Think\Verify($config);$Verify->entry();
二是動態設定:
$Verify = new \Think\Verify();$Verify->fontSize = 30;$Verify->length = 3;$Verify->useNoise = false;$Verify->entry();
強調一下中文驗證碼的方法1.本身架構裡沒有字型參數,所以從C盤找到字型參數
2.選取ttf格式的字型參數複製到thinkphp\ThinkPHP\Library\Think\Verify\zhttfs檔案夾下
3.代碼中調用中文驗證碼參數
public function yzm(){ $v = new \Think\Verify();//造對象 $v->useZh = true;//中文驗證碼 $v->fontttf="STKAITI.TTF"; $v->entry(1);//產生驗證碼}
ThinkPhp架構:驗證碼功能