[TOC] # 簡介       # api ## 第一步：顯示驗證碼圖片 控制器要配置一個action映射，將顯示驗證碼圖片的網址映射給[yii\\captcha\\CaptchaAction](http://www.yiichina.com/doc/api/2.0/yii-captcha-captchaaction) 為了快速上手，請你**一定要在Site控制器下進行映射！** ~~~php class SiteController extends \yii\web\Controller{ public function actions(){ return [ //默認情況下一定要命名為 captcha，后面再教你改 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'width' => 220, //寬高 'height' => 70, 'padding' => '0', //內邊距 'transparent' => true, //透明底 'backColor' => 0x000000, //背景色 'foreColor' => 0xFFFFFF, //文字色 ], ]; } } ~~~ 這樣就能實現訪問`?r=site/captcha`的時候能看到一張驗證碼圖片，而這張圖片就是[yii\\captcha\\CaptchaAction::run](http://www.yiichina.com/doc/api/2.0/yii-captcha-captchaaction#run()-detail)輸出的 實際上這個地址每被訪問一次的時候，Yii除了生成驗證碼圖片顯示出來之余，它還在session里存好了驗證碼的值，以便我們未來提交上去時能比較是否輸入正確 * * * ## 第二步：設定前端的輸入表單 我這里以自定義的表單演示： ~~~php <form method="post" action="/index.php?r=site/login"> <!--下面加onclick是為了實現點擊刷新--> <img src="/index.php?r=site/captcha" /><br/> <input type="text" placeholder="請輸入驗證碼" name="verifyCode" /><br/> <button type="submit">提交</button> </form> ~~~ * * * ## 第三步：定義一個表單模型 驗證規則的名稱就是`captcha` ~~~php class LoginForm extends \yii\base\Model{ public function rules(){ return [ ['captcha', 'captcha', 'message' => '驗證碼錯誤'], ]; } } ~~~ * * * ## 第四步：控制器調用 ~~~php //這個login方法先放Site控制器吧，其實無所謂 public function actionLogin(){ $form = new LoginForm(); $form->load(Yii::$app->request->post(), ''); if($form->validate()){ echo '驗證碼正確'; }else{ echo current($form->firstErrors); //驗證碼錯誤 } } ~~~ * * * ## 刷新驗證碼 ### 錯誤的做法 如果將上面的img標簽改成`<img src="/index.php?r=site/captcha" onclick="this.src=/index.php?r=site/captcha&v=隨機數" />`這樣的話即使是加了隨機數，但點擊后重新加載的驗證碼都是一模一樣不會變化的，不信你直接在瀏覽器上訪問[http://localhost/index.php?r=site/captcha&v=111](http://localhost/index.php?r=site/captcha&v=111)然后再訪問[http://localhost/index.php?r=site/captcha&v=222](http://localhost/index.php?r=site/captcha&v=222)，都會是同一張圖片 ### 正確的做法 要實現刷新驗證碼先要通過ajax獲取一個不同的驗證碼地址： ~~~js $.get('/index.php?r=site/captcha&refresh=1', function(result){ //這就是新的驗證碼地址，類似 /index.php?r=site%2Fcaptcha&v=58e8de5c89096 console.log(result.url); }); ~~~ 注意這里ajax請求的地址多了個參數叫`refresh`，值為1 ajax成功得到這個新的url后，將它設置到img的src屬性里就可以更新驗證碼圖片了 * * * ## 示例代碼下載 [http://pan.baidu.com/s/1i5Fo5lb](http://pan.baidu.com/s/1i5Fo5lb) 這個示例并沒有使用**site/captcha**這個路由來產生驗證碼，而是使用了**abc/xxx** 在這種情況下（非site/captcha）要在表單模型**rules**里定義規則時多加一個`captchaAction`才能成功校驗，未來我會發表文章專門講講這個