yii2集成了许多基础的功能,验证码也在其中,但是官方文档对验证码的介绍使用很少。
在yii2中,验证码这一功能被当作是widgets,其使用有以下几个步骤:
步骤1:
captcha在控制其中是作为一个独立动作来使用,即在控制器中重写actions方法:
public function actions()
{
return [
'error' => [
'class' => 'yii\web\ErrorAction',
],
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'maxLength'=>4,
'minLength'=>4,
'padding'=>5,
'height'=>39,
'width'=>100,
'offset'=>3,
],
];
}
在这里注册了两个独立动作,一个是error,一个就是我们需要captcha,里面有多个参数,其中最重要的就是class,它指明captcha的位置,其余参数及解释点击此处:
步骤2:
在控制器actions中注册了captcha方法后,在表单对应的模型中添加captcha字段。
public $captcha = null;//这里是为模型添加一个验证码字段,用来保存前端传来的验证码值
public function rules()
{
return [
['username','required','message'=>'用户名不能为空'],
['password','required','message'=>'密码不能为空'],
['password','validatePass'],
['captcha','required','message'=>'验证码不能为空'], //必须输入验证码
['captcha','captcha','captchaAction'=>'admin/login/captcha','message'=>'验证码不正确']
];
}
验证码验证器后面可以根三个选项:
caseSensitive:对验证码的比对是否要求大小写敏感。默认为 false。
captchaAction:指向用于渲染 CAPTCHA 图片的 CAPTCHA action 的 路由。默认为 ‘site/captcha’。 (此选项必填,不然前台可能无法生成验证码,并且路由要和当前控制器所在路由一致,比如现在处于admin模块/login控制器,那么填入的内容就是’admin/login/captcha’)
skipOnEmpty:当输入为空时,是否跳过验证。 默认为 false,也就是输入值为必需项。
步骤3:
在前台生成验证码,有两种方法
第一种:
<?php echo Captcha::widget()?>
在widget可以填入相关配置参数,具体介绍留到第二种方法。同时推荐第二种方法。
第二种:
<?php echo $form->field($model, 'captcha')->widget(Captcha::className(), [
'captchaAction' => 'login/captcha',
'options' => [
'class' => 'input-text size-L',
'style' => 'width:150px;',
'placeholder' => '输入验证码',
],
'template' => '
{input} {image}
',
'imageOptions' => [
'style' => '',
]
])->label('<i class="Hui-iconfont">验证码</i>') ?>
相关的配置就填写在第二个参数里
共有4个参数可填写
captchaAction:生成验证码图片的路由 注意:这个必须指定且必须与视图所在方法的路由一致,比如现在处于admin模块/login控制器/login方法,那么填入的内容就是’login/captcha’,省略掉模块id。
imageOptions:设置生成的验证码图片的相关属性,有width、height、font、offset等等
options:与验证码图片绑定的类型为text的input输入框的相关属性
template:模板参数
至此验证码调用完成。
注意,使用验证码的时候,视图文件中必须包含 this−>beginPage(), t h i s − > b e g i n P a g e ( ) , this->head(), this−>beginBody(), t h i s − > b e g i n B o d y ( ) , this->endBody(),$this->endPage。否则就不能实现验证码的点击刷新功能。
在使用过程中发现,通过F5刷新页面,填入验证码后可以提交表单数据到后台,但是通过点击图片刷新验证码后,点击提交按钮会提示验证码错误。经过抓包测试后,推断得出可能是ActiveForm开启了前台js验证功能,点击图片刷新后,是因为没能通过js验证,导致http请求被中断。至于为什么会提示验证码错误暂时没找到原因。希望大神指点一下。 解决方法是在
<?php $form = ActiveForm::begin([
'enableClientValidation' => false,
'options' => ['class' => 'form form-horizontal'],
'action' => ['login/login'],
'fieldConfig' => [
'template' => '<div class="row cl">
{label}
<div class="formControls col-xs-8">
{input}{error}
</div>
</div>',
'labelOptions' => ['class' => 'form-label col-xs-3']
]
]); ?>
开始动态表单的时候,关掉前台验证功能
'enableClientValidation' => false