请先登录

【转】Yii2验证码使用,不改源码实现验证码刷新

作者：master 标签: yii2 发布时间:2018-01-09 09:57:33 0

说明 Yii2框架的官方文档对于验证码的使用涉及的篇幅很少，然而验证码在开发中其实使用得非常多，以下是通过查阅资料，摸索出的方案解决了验证码不能刷新的问题使用步骤

定义验证码action 和error一样，验证码需定义在actions方法中通常为了方便，可以直接将它定义在SiteController中，如果想定义在控制器也可以，只是调用时一定要指明是哪个控制中以SiteController为例

<?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
class SiteController extends Controller
{
 /**
  * @var string $layout 指定使用error布局
  */
 public $layout = 'error';
 /**
  * 定义captcah验证码，和默认错误展示页面
  */
 public function actions()
 {
     return [
     //验证码action
         'captcha' => [
             'class' => 'yii\captcha\CaptchaAction',
             'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
             'backColor'=>0x000000,//背景颜色
             'maxLength' => 5, //最大显示个数
             'minLength' => 4,//最少显示个数
             'padding' => 3,//间距
             'height'=>34,//高度
             'width' => 90,  //宽度
             'foreColor'=>0xffffff,     //字体颜色
             'offset'=>4        //设置字符偏移量 有效果
         ],
         'error' => [
             'class' => 'yii\web\ErrorAction',
         ]
     ];
 }
}

视图中输出验证码图片注意事项请查看代码中的html注释部分

<?php
use yii\captcha\Captcha;
?>
<form role="form">
                     <fieldset>
                         <div class="form-group">
                             <input class="form-control" placeholder="请输入用户名" name="username" type="text" autofocus>
                         </div>
                         <div class="form-group">
                             <input class="form-control" placeholder="请输入密码" name="password" type="password">
                         </div>
                         <div class="form-group">
                             <input class="form-control" style="width: 226px; display: inline-block;" placeholder="请输入验证码" name="captcha" type="text">
                            <!--验证码输出，调用Captcha类下的widget方法，需传入必要的配置信息，name属性必须要传入，captchaAction属性指定是哪个控制器下的哪个方法，site/captcha就是上文我们在SiteController的actions中定义的验证码
                            方法（其实在SiteCOntroller中的actions定义的，可以不添加该项，因为默认是SiteController，如果是在其他控制器中定义的，则必须添加该项）。imageOptions可以制定一些html标签属性属性，template指定模板，
                            这里只输出img标签，故只用了{image}-->
                            <?=Captcha::widget(['name'=>'captcha-img','captchaAction'=>'site/captcha','imageOptions'=>['id'=>'captcha-img', 'title'=>'换一个', 'style'=>'cursor:pointer;'],'template'=>'{image}']);?>
                         </div>
                         <div class="checkbox">
                             <label>
                                 <input name="remember" type="checkbox" value="1">记住我
                             </label>
                         </div>
                         <!-- Change this to a button or input when using this as a form -->
                         <a href="" class="btn btn-lg btn-success btn-block">登录</a>
                     </fieldset>
                 </form>

解决验证码不刷新问题这里使用js解决该问题，通常验证码都要求点击刷新，刷新页面时也刷新，然而Yii2验证码，如果用js控制，更新验证码地址其实不会起作用，但是我们还是可以按以下方式来弥补

$(function () {
 //解决验证码不刷新的问题
 changeVerifyCode();
 $('#captcha-img').click(function () {
     changeVerifyCode();
 });
});
//更改或者重新加载验证码
function changeVerifyCode() {
//项目URL
 var adminUrl = $('#admin-url').val();
 $.ajax({
 //使用ajax请求site/captcha方法，加上refresh参数，接口返回json数据
     url: adminUrl+"index.php/site/captcha?refresh",
     dataType: 'json',
     cache: false,
     success: function (data) {
     //将验证码图片中的图片地址更换
         $("#captcha-img").attr('src', data['url']);
     }
 });
}

本文章转载自 http://blog.csdn.net/dc769319/article/details/53022570#reply

【转】Yii2验证码使用,不改源码实现验证码刷新

输入评论内容