说明
Yii2框架的官方文档对于验证码的使用涉及的篇幅很少,然而验证码在开发中其实使用得非常多,以下是通过查阅资料,摸索出的方案
解决了验证码不能刷新的问题
使用步骤
1. 定义验证码action
和error一样,验证码需定义在actions方法中
通常为了方便,可以直接将它定义在SiteController中,如果想定义在控制器也可以,只是调用时一定要指明是哪个控制中
以SiteController为例
<?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
class SiteController extends Controller
{
/**
* @var string $layout 指定使用error布局
*/
public $layout = 'error';
/**
* 定义captcah验证码,和默认错误展示页面
*/
public function actions()
{
return [
//验证码action
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
'backColor'=>0x000000,//背景颜色
'maxLength' => 5, //最大显示个数
'minLength' => 4,//最少显示个数
'padding' => 3,//间距
'height'=>34,//高度
'width' => 90, //宽度
'foreColor'=>0xffffff, //字体颜色
'offset'=>4 //设置字符偏移量 有效果
],
'error' => [
'class' => 'yii\web\ErrorAction',
]
];
}
}
2. 视图中输出验证码图片
注意事项请查看代码中的html注释部分
<?php
use yii\captcha\Captcha;
?>
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="请输入用户名" name="username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="请输入密码" name="password" type="password">
</div>
<div class="form-group">
<input class="form-control" style="width: 226px; display: inline-block;" placeholder="请输入验证码" name="captcha" type="text">
<!--验证码输出,调用Captcha类下的widget方法,需传入必要的配置信息,name属性必须要传入,captchaAction属性指定是哪个控制器下的哪个方法,site/captcha就是上文我们在SiteController的actions中定义的验证码
方法(其实在SiteCOntroller中的actions定义的,可以不添加该项,因为默认是SiteController,如果是在其他控制器中定义的,则必须添加该项)。imageOptions可以制定一些html标签属性属性,template指定模板,
这里只输出img标签,故只用了{image}-->
<?=Captcha::widget(['name'=>'captcha-img','captchaAction'=>'site/captcha','imageOptions'=>['id'=>'captcha-img', 'title'=>'换一个', 'style'=>'cursor:pointer;'],'template'=>'{image}']);?>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="1">记住我
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<a href="" class="btn btn-lg btn-success btn-block">登录</a>
</fieldset>
</form>
3. 解决验证码不刷新问题
这里使用js解决该问题,通常验证码都要求点击刷新,刷新页面时也刷新,然而Yii2验证码,如果用js控制,更新验证码地址其实不会起作用,但是我们还是可以按以下方式来弥补
$(function () {
//解决验证码不刷新的问题
changeVerifyCode();
$('#captcha-img').click(function () {
changeVerifyCode();
});
});
//更改或者重新加载验证码
function changeVerifyCode() {
//项目URL
var adminUrl = $('#admin-url').val();
$.ajax({
//使用ajax请求site/captcha方法,加上refresh参数,接口返回json数据
url: adminUrl+"index.php/site/captcha?refresh",
dataType: 'json',
cache: false,
success: function (data) {
//将验证码图片中的图片地址更换
$("#captcha-img").attr('src', data['url']);
}
});
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。