[model验证]-- 自带验证码项目总结

yii2.0 自带的验证码可以帮我们实现了验证码,下面就是我在项目中的应用, 由于之前网上查询也碰到一定的问题,,所以总结我这次的项目..........

效果图如下:



说明:

          1): yii2.0自带的验证码可以帮助我们去验证,不需要我们去写;

          2): 当我们点击验证码,它能够实现无刷新切换验证码, 这步就是需要写ajax来实现此功能;

1: 在关于登录controller里面重写actions方法

下面这些个参数对应的类是@app\vendor\yiisoft\yii2\captcha\CaptchaAction.php,可以参照这个

类里的参数去修改，也可以直接修改这个类的默认参数，

/**
* 获取验证码
*/
public function actions()
{
$captchaConfig = [
'class' => 'yii\captcha\CaptchaAction',
'maxLength' => 4,
'minLength' => 4,
];

return [
'error' => [
'class' => 'yii\web\ErrorAction',
],

'captcha' => $captchaConfig, // 注册-验证码
];
} 2: 如果你的项目使用了权限控制,那么你控制器中需要加上下面的代码, 在此那,我现在还不会rbac, 所以这里也不多说了,等我以后会了,再写.


提示:  你要加上"capecha"3: 表单模型：假如是一个登陆表单,这里只给出验证码相关的部分。public $verifyCode;

public function rules()
{
return [
// username and password are both required
[['username', 'password'], 'required'],
// rememberMe must be a boolean value
['rememberMe', 'boolean'],
// password is validated by validatePassword()
['password', 'validatePassword'],
[['verifyCode'], 'required'],
['verifyCode', 'captcha', 'message'=>'验证码错误'],

];
}

public function attributeLabels()
{
return [
'verifyCode' => '',
];
}
提示: 验证规则里面验证码的验证器是

captcha

。
4: 就是模板页面login.php:<?= $form->field($model, 'verifyCode', [
'options' => ['class' => 'form-group form-group-lg'],
])->widget(Captcha::className(),[
'options' => ['maxlength' => 4, 'style' => 'width: 190px; padding: 8px;', 'placeholder' => '请输入验证码'],
'template' => "{input} {image}",
'imageOptions' => ['alt' => '验证码','id' => 'login_code', 'src' => '', 'data-api' => Url::toRoute(['site/captcha'], true)],
]); ?>
提示: 
         1):  "verifyCode", 与你的model文件中rules方法中是同名的         2):  用ActiveForm生成对应字段。

captchaAction

参数指定第一步是在写在哪里的，默认是

site

里面。
5: jq代码如下:<script>
function refreshCode(obj) {
var url = $(obj).attr('data-api');

if (url) {
$.ajax({
url: url + '?refresh',
dataType: 'json',
type: 'get',
success: function(data) {
$(obj).attr('src', data.url);
}
});
}
}

$(function () {
refreshCode('#login_code');

$('#login_code').click(function (event) {
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //该方法将停止事件的传播，阻止它被分派到其他 Document 节点

refreshCode(this);
});

});
</script>