[model验证]-- 自带验证码项目总结_model.verifycode;-CSDN博客

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>