[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`才能成功校验，未来我会发表文章专门讲讲这个