yii2.0 自带验证码项目总结

最新推荐文章于 2022-03-31 10:33:07 发布

daxia_85

最新推荐文章于 2022-03-31 10:33:07 发布

阅读量2.7k

点赞数

文章标签： PHP yii2.0 验证码

本文链接：https://blog.csdn.net/daxia_85/article/details/51297656

版权

本文总结了yii2.0框架中内置验证码的使用经验，包括如何在项目中应用验证码，实现无刷新切换效果。通过在控制器中重写actions方法，设置表单模型，并在login.php模板页面中正确配置，最后利用AJAX实现点击验证码图片时的动态刷新。

摘要由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>