yii2 验证码组件

生成验证码

在要使用验证码的Controller里面实现actions方法：

 [
                'class' => CaptchaAction::className(),
                'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,//本行可能引起更换验证码失效，必须刷新浏览器
                'backColor' => 0x66b3ff,//背景颜色
                'maxLength' => 4,//最大显示个数
                'minLength' => 4,//最少显示个数
                'padding' => 6,//验证码字体大小，数值越小字体越大
                'height' => 34,//高度
                'width' => 100,//宽度
                'foreColor' => 0xffffff,//字体颜色
                'offset' => 13,//设置字符偏移量
            ]
        ];
    }   
}

以上代码通过实现actions方法创建了一个叫captchatest的action，上面的action我只填了两个参数，还有其他参数可以参考yii\captcha\CaptchaAction的publish属性

在页面中使用验证码，在要使用验证码的view里面插入以下代码：

'captchaimg',
    'captchaAction'=>'captchatest',
    'imageOptions'=>['id'=>'captchaimg', 'title'=>'换一个', 'alt'=>'换一个','style'=>'cursor:pointer;margin-top:10px; height: 22px;'],
    'template'=>'{image}']);
    // 以上代码主要需要正确填写captchaAction，填写你刚才创建的captchaAction，需要完整的namespace，然后会生成一个img

验证验证码，在action中接收到表单传来的验证码后，使用：

$this->createAction('captchatest')->validate($captchCode, false);
$captchCode为用户输入的验证码，validate函数会返回true/false，该函数的第二个参数为是否对大小写敏感

点击刷新验证码

生成的验证码有时用户看不清楚，需要重新刷新，可以使用该图片的url加上refresh参数，然后会返回一个json数据，其中有一个url的属性，调用该url即可获取新验证码，
如图片地址为：/index.php?r=test%2Fcaptchatest&v=5680ce41e9cb0
刷新地址便是：/index.php?r=test%2Fcaptchatest&v=5680ce41e9cb0&refresh=1

JS代码如下：

解决页面刷新验证码不刷新

只需要继承 \yii\captcha\CaptchaAction，然后重写 run() 方法中调用为 getVerifyCode(true) 可以解决问题

setHttpHeaders();
        \Yii::$app->response->format = Response::FORMAT_RAW;
        return $this->renderImage($this->getVerifyCode(true));
    }

}

在 SiteController 控制器中注册 CaptchaAction 方法：

 [
            'class' => 'admin\controllers\action\CaptchaAction', // 注意这是重写后的CaptchaAction
            'testLimit' => 1,
            'maxLength' => 6,
            'minLength' => 6,
            'padding' => 1,
            'height' => 50,
            'width' => 140,
            'offset' => 1,
        ],
    ];
}

设置验证码验证规则：

 '/site/captcha'],
        ];
    }
}