登陆流程（二）：验证码(点击图片可换) [ 2.0 版本 ]

在UserForm中加入验证码rules

[['user', 'pwd', 'verifyCode'], 'required','message'=>'{attribute}不能为空！'],
 ['verifyCode', 'captcha','captchaAction'=>'/admin/site/captcha','message'=>'{attribute}有误'],  //验证验证码是否正确

这里的'captchaAction'=>'/admin/site/captcha'指定验证码验证方法，你可以使用默认site/controller下的

siteController下注册captcha方法

 public function actions()
    {
        return [
            'error' => [
                'class' => 'yii\web\ErrorAction',
            ],
            'captcha' => [
                'class' => 'yii\captcha\CaptchaAction',
                //'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
                //'backColor'=>0x000000,//背景颜色
                'maxLength' => 4, //最大显示个数
                'minLength' => 4,//最少显示个数
                //'padding' => 5,//间距
                'height'=>50,//高度
                'width' => 80,  //宽度
                // 'foreColor'=>0xffffff,     //字体颜色
                //'offset'=>4,        //设置字符偏移量 有效果
                //'controller'=>'login',        //拥有这个动作的controller
            ],
        ];
    }

参数请自行选择选择

重要的view层：点击更换验证码；

 <div class="form-group form-group-lg captcha field-userform-verifycode required has-error" >
                <label class="control-label" for="userform-verifycode">验证</label>
                <div class="row">
                    <div class="col-md-5 col-xs-5">
                        <input type="text"  class="form-control" name="UserForm[verifyCode]" >
                    </div>
                    <div class="col-md-3 col-xs-4 mr20">
                        <img id="imgVerifyCode" onclick="changeVerifyCode()"  alt="验证码">
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a style="cursor:pointer;vertical-align: middle;line-height: 40px;" onclick="changeVerifyCode()">换一张</a>
                    </div>
                </div>

                <p class="help-block help-block-error"><?php echo ($_POST && isset($model->errors['verifyCode'][0])) ? $model->errors['verifyCode'][0] : '';?></p>
            </div>

对应js点击更换图片，对于验证码得到则采用 /admin/site/captcha?refresh 这个方法

$(function(){                   //当页面加载的时候
    changeVerifyCode();         //刷新或者重新加载一个验证码

    //清除输入框里面的数据
    $("#clear_form").click(function(){
        $("input").val('');
    });
});

//更改或者重新加载验证码
function changeVerifyCode() {
    $.ajax({
        url: "/admin/site/captcha?refresh",
        dataType: 'json',
        cache: false,
        success: function(data) {
            $("#imgVerifyCode").attr('src', data['url']);
        }
    });
}

在视图中我没采用yii2的form，样式是仿写过来的，也可以显示错误；

如果觉得代码不够，可以参看

https://github.com/dmodaii/yiicms2

这个master是fork的，dev分支上才有我改的