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

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

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

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

public function actions() {
return [
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'maxLength' => 4,
'minLength' => 4
],
];
}

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

2、siteController继续配置。

public function behaviors() {
return [
'access' => [
'class' => AccessControl::className(),
'rules' => [
[
'actions' => ['login', 'error', 'captcha'],
'allow' => true,
],
],
];
}

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

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

use yii\captcha\Captcha;
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
]) ?>

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

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

class LoginForm extends Model {
//...... public $verifyCode;
public function rules() {
return [
//......
['verifyCode', 'captcha'],
];
}
public function attributeLabels() {
return [
'verifyCode' => '', //验证码的名称,根据个人喜好设定
];
}
}
//定义了verifyCode属性
//rules规则添加了验证
//label中定义了其显示名称

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

6、看效果就好了。

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

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

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

yii2增加验证码详细步骤的更多相关文章

  1. unity3d开发的android应用中增加AD系统的详细步骤

    unity3d开发的android应用中增加AD系统的详细步骤 博客分类: Unity3d unity3d  Unity3d已经支持android,怎样在程序里增加admob?  试了一下,确实能够, ...

  2. cas sso单点登录系列5_cas单点登录增加验证码功能完整步骤

    转:http://blog.csdn.net/ae6623/article/details/8919718 本篇教程cas-server端下载地址:解压后,直接放到tomcat的webapp目录下就能 ...

  3. SSO单点登录系列5:cas单点登录增加验证码功能完整步骤

    本篇教程cas-server端下载地址:解压后,直接放到tomcat的webapp目录下就能用了,不过你需要登录的话,要修改数据源,C:\tomcat7\webapps\casServer\WEB-I ...

  4. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  5. iOS开发之 xcode6 APP 打包提交审核详细步骤

    一. 在xcode6.1和ios10.10.1环境下实现app发布 http://blog.csdn.net/mad1989/article/details/8167529 http://jingya ...

  6. JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apache/IIS的整合)

    链接地址:http://www.cnblogs.com/dartagnan/archive/2011/03/25/2003426.html JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apa ...

  7. 使用Android-studio开发移动app与weex结合开发详细步骤

    详细步骤如下:   首先,确保机器已经安装了node.js,并且把npm更新到最新版本 下载完毕后,我们可以看到全局目录下的node_modules下面多出一个weex-toolkit 同时,我们留意 ...

  8. linux下mysql-5.5.15安装详细步骤

    linux下mysql-5.5.15安装详细步骤 注:该文档中用到的目录路径以及一些实际的值都是作为例子来用,具体的目录路径以各自安装时的环境为准 mysql运行时需要一个启动目录.一个安装目录和一个 ...

  9. windows10用WMware安装Linux虚拟机详细步骤

    windows10用WMware安装Linux虚拟机详细步骤   一.安装环境 windows10操作系统物理机VMware Workstation 软件(可以在网上下载)CentOS6.9镜像文件( ...

随机推荐

  1. 关于EF的 序列化类型为“XXX”的对象时检测到循环引用。

    在用Ef的时候,也许经常会遇到循环引用的错误. 下面提供解决办法.(不是Json.Net,如果是Json.Net可以给导航属性通过增加特性标签来解决该问题) ef大多数问题,可以通过ToList()来 ...

  2. HTML 5 Web 存储

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 html5 web sto ...

  3. 透过IL看C#:switch语句(转)

    透过IL看C# switch语句(上) 摘要: switch语句是 C#中常用的跳转语句,可以根据一个参数的不同取值执行不同的代码.本文介绍了当向 switch语句中传入不同类型的参数时,编译器为其生 ...

  4. Wijmo 2016 V1 强势发布,全面支持Angular 2

    Wijmo UI控件支持Angular 2 从Angular的1.x时代开始,Wijmo就已经支持Angular了.最近,我们正在和Angular团队合作来支持Angular 2.有趣的是,对Angu ...

  5. MultiLine Text光标停留在第一行

    MultiLine Text是多行文本,默认设置下,光标是停留在控件中间的,很不好看. 解决的方法是设置属性android:gravity="top",这样光标就会停留在第一行.

  6. 蘑菇街2015校招 Java研发笔试题 详解

    1. 对进程和线程描述正确的是( ) A.  父进程里的所有线程共享相同的地址空间,父进程的所有子进程共享相同的地址空间. B.  改变进程里面主线程的状态会影响其他线程的行为,改变父进程的状态不会影 ...

  7. 容器--WeakHashMap

    一.概述 WeakHashMap是Map的一种,根据其类的命令可以知道,它结合了WeakReference和HashMap的两种特点,从而构造出了一种Key可以自动回收的Map. 前面我们已经介绍了W ...

  8. [javaSE] 反射-Class类的基本操作

    获取类的名称 获取该类的方法 获取方法的返回值类型 获取方法的名称 获取方法的参数的类型 package com.tsh.reflect; import java.lang.reflect.Metho ...

  9. 献给广大it从业人士:早睡早起,晚睡也早起

    早睡早起占人体健康的百分之七十:心态.饮食.及时调理各占百分之十,我们就可以知道早睡早起的重要性. 我们白天是放电,晚上睡觉是充电.晚上只冲了50%的电,白天还要释放100%,那50%哪来的?就是从五 ...

  10. 【转】给Windows + Apache 2.2 + PHP 5.3 安装PHP性能测试工具 xhprof

    原文链接:http://blog.snsgou.com/post-816.html 1.下载XHProf 到这里 http://dev.freshsite.pl/php-extensions/xhpr ...