Home > php教程 > php手册 > yii2增加验证码详细步骤 - 白狼栈

yii2增加验证码详细步骤 - 白狼栈

WBOY
Release: 2016-05-20 11:39:26
Original
1300 people have browsed it

作者:白狼 出处:http://www.manks.top/article/yii2_captcha本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

本来以为yii2框架验证码这块很全面,尝试百度google了一下,大多数教程写的零零散散不全面,想着自己写一份带有完整步骤的验证码教程。

我们假设site/login 表单登录需要增加验证码。

1、siteController控制器的actions方法增加captcha设置

<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> actions() { 
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> [ 
        </span>'captcha' =><span style="color: #000000;"> [ 
            </span>'class' => 'yii\captcha\CaptchaAction', 
            'maxLength' => 4, 
            'minLength' => 4<span style="color: #000000;"> 
        ]</span>,<span style="color: #000000;"> 
    ]; 
}</span>
Copy after login

 

上面我们简单设置了验证码的位数,有小伙伴好奇都有哪些配置项,这个你可以查看文件 vendor\yiisoft\yii2\captcha,包括验证码背景色,字体文件等设置都可以在这里找到。

2、siteController继续配置。

<span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> behaviors() { 
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> [ 
        </span>'access' =><span style="color: #000000;"> [ 
            </span>'class' => AccessControl::className(), 
            'rules' =><span style="color: #000000;"> [ 
                [ 
                    </span>'actions' => ['login', 'error', 'captcha'], 
                    'allow' => <span style="color: #0000ff;">true</span>,<span style="color: #000000;"> 
                ]</span>,<span style="color: #000000;"> 
            ]</span>,<span style="color: #000000;"> 
        ]; 
}</span>
Copy after login

 

为access rules的actions增加captcha方法可访问。

3、我们看看view层,增加验证码input。

<span style="color: #0000ff;">use</span><span style="color: #000000;"> yii\captcha\Captcha; 
</span>= <span style="color: #800080;">$form</span>->field(<span style="color: #800080;">$model</span>, 'verifyCode')->widget(Captcha::className(),<span style="color: #000000;"> [ 
    </span>'template' => '<div class="row">
<div class="col-lg-3">{image}</div>
<div class="col-lg-6">{input}</div>
</div>',<span style="color: #000000;"> 
]) </span>?>
Copy after login

 

4、这样还不行,我们还需要增加验证码的验证规则

我们这里用到的是LoginForm,因此修改LoginForm文件

<span style="color: #0000ff;">class</span> LoginForm <span style="color: #0000ff;">extends</span><span style="color: #000000;"> Model { 
    </span><span style="color: #008000;">//</span><span style="color: #008000;">...... public $verifyCode; </span>
    <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> rules() { 
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> [ 
            </span><span style="color: #008000;">//</span><span style="color: #008000;">...... </span>
            ['verifyCode', 'captcha'],<span style="color: #000000;"> 
        ]; 
    } 
    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> attributeLabels() { 
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> [
             </span>'verifyCode' => '', <span style="color: #008000;">//</span><span style="color: #008000;">验证码的名称,根据个人喜好设定 </span>
<span style="color: #000000;">        ]; 
    } 
} 
</span><span style="color: #008000;">//</span><span style="color: #008000;">定义了verifyCode属性 
//rules规则添加了验证 
//label中定义了其显示名称</span>
Copy after login

 

5、到第四步基本上配置好验证码就会正常显示了。如果你的后台设定了rbac权限控制,恐怕你仍然需要在config内为as accss增加/site/captcha可访问。

6、看效果就好了。

验证码效果实现

7、有同学问为啥页面刷新验证码不跟着刷新,我个人觉得刷不刷新不重要,当你输错验证码页面刷新的时候验证码才会刷新。如果你非要刷新页面验证码跟着刷新,尝试一种简单的方法实现。

$('验证码对象').click();

即在页面刷新的时候重新点击一次验证码进行强制刷新。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template