Yii2增加验证码步骤详解

2024-10-10 14:00:48

本来以为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增加验证码步骤，希望对大家有所帮助！

Yii2简单实现给表单添加验证码的方法

本文实例讲述了Yii2简单实现给表单添加验证码的方法.分享给大家供大家参考,具体如下: 控制器SiteController: class SiteController extends Controller { // ... public function actions() { return [ // ... 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'fixedVerifyCode' => YII_ENV_TEST ?
Yii2下点击验证码的切换实例代码

最近需要用到验证码,搜索了很多关于Yii2验证码的切换的介绍,下面我来记录一下,有需要了解Yii2下验证码的切换的朋友可参考.希望此文章对各位有所帮助. 模型代码如下: <?php namespace app\admin\models; use yii; use yii\base\model; use yii\captcha\Captcha; class LoginForm extends Model{ public $verifyCode; public $password; public $
Yii2 如何在modules中添加验证码的方法

最近玩了下Yii2的验证码部分,正常的逻辑都可以走通的,网上的例子也是没有问题的,关键有问题的部分是在module中使用的时候,分享给大家,往下看之前可以去看看正常情况下是如何使用的. controller部分的代码,这里的跟网上的都类似 public function actions() { return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'fixedVerifyCode' => null, 'backCo
yii2中添加验证码的实现方法

本文实例讲述了yii2中添加验证码的实现方法.分享给大家供大家参考,具体如下: 首先,在模型中添加验证码字段: public function rules(){ return ['verifyCode', 'captcha'], } 其次,可以在函数attributeLabels中添加前台页面中验证码的字段名称: public function atrributeLabels(){ return ['verifyCode'=>'Verification Code', ]; } 然后,在视图文件中
Yii 2.0自带的验证码使用经验分享

前言官网自带的前台验证码中在view下有个contact.php的文件,大家没事可以先看看它是怎么调验证码闲话不说,感兴趣的朋友们下面来一起看看详细的介绍: 使用方法如下: 第一步: 因为我本身建立了modules,所以我在我的modules下新建了models的目录(默认gii生成modules是没有这个目录的),我取名为LoginForm.php 代码如下: namespace app\modules\XXX\models;//这个你们写自己的命名空间,我以我的modules项目路径
Yii2增加验证码步骤详解

本来以为yii2框架验证码这块很全面,尝试百度google了一下,大多数教程写的零零散散不全面,想着自己写一份带有完整步骤的验证码教程. 我们假设site/login 表单登录需要增加验证码. 1.siteController控制器的actions方法增加captcha设置 public function actions() { return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'maxLength' => 4
sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解

废话不多说了,直接给大家贴代码了,具体代码如下所示: --服务器角色: --固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL Server,且不能更改分配给它们的权限. --可以在数据库中不存在用户帐户的情况下向固定服务器角色分配登录. --按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: --1.Bulkadmin:这个服务器角色的成员可以运行BULKINSERT语句.这条语句允许从文本文件中将数据导入到SQL
vue项目添加多页面配置的步骤详解

公司使用 vue-cli 创建的 vue项目在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读
移植busybox构建最小根文件系统的步骤详解

Busybox:瑞士军刀,里面装有很多小命令. STEP 1:构建目录结构创建根文件系统目录,主要包括以下目录 /dev /etc /lib /usr /var /proc /tmp /home /root /mnt /bin /sbin /sys #mkdir /home/rootfs #cd /home/rootfs #mkdir dev etc lib usr var proc tmp home root mnt sys STEP 2: 使用busybox构建/bin /sbin lin
Angular6封装http请求的步骤详解

最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块. 之前使用的ajax库是axios,可以设置baseurl,公共头部:集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能. 拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现设置baseur
vue项目中使用tinymce编辑器的步骤详解

Tinymce富文本也是一款很流行编辑器把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实现瀑布流,这里选择绝对定位方式: 关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放.而且由于图片的加载是异步延迟.在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位.因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中的Im
vscode C++开发环境配置步骤详解(教你如何用vscode编写写C++)

用了一段时间的cb,Devc++,但一直感觉cb的高亮太差,而Devc++使用体验差(尤其是代码补全功能),换过vs2017,但是由于其太大了,卡顿十分明显,所以最终选择了vscode这款轻量级编译器.由于自己在配置c++开发环境时遇到了不少问题,因此特地写了这篇博文,希望能够帮助后来者快速实现c++环境配置. 步骤一:下载vscode 直接进入vscode官网下载即可,要注意选择与自己系统符合的版本. 官网地址:https://code.visualstudio.com/?wt.mc_id=D
vue实现的多页面项目如何优化打包的步骤详解

遇到的问题在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自
使用Typescript开发微信小程序的步骤详解

Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

Yii2增加验证码步骤详解

相关推荐

随机推荐