Yii2 Captcha刷新或重新加载图像

Question

我正在使用yii2随附的高级应用程序模板的默认Captcha实现。 我花了很多时间找到任何api属性，该属性允许我添加Refresh图像链接，该链接允许用户生成新的Captcha图像，但是我不知道该怎么做。 我根据Jquery尝试了以下客户端解决方案：

<!-- This code is placed just before the closing </body> tag at the end of
"frontend/views/layouts/main.php" -->
<script>
  $("#fox").click(function(event){
    event.preventDefault();
    $("img[id$='-verifycode-image']").click();
  })
</script>

在contact.php的contactAction视图中，我向captcha的小部件中添加了一个ID fox链接，如下所示：

<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
    'template' => '<div class="row"><div class="col-lg-3">{image}<a href="#" id="fox">Refresh</a></div><div class="col-lg-6">{input}</div></div>',
]) ?>

上面描述的解决方案可以正常工作，但是必须为所有应用程序视图（ contactAction视图或使用Captcha！的任何其他视图）添加不可用的代码。 因为我无法在包含Jquery库之前插入代码。 即在视图中，所以我将其插入布局的末尾。

这里的问题：yii2 api是否有直接解决方案？ 还是有更好的建议使此jquery代码在视图中工作？ 即把它变成纯JavaScript。

Answer 1

下面的代码为我工作-

查看文件上的表单代码以生成验证码图像-

<?= $form->field($model, 'captcha')->widget(\yii\captcha\Captcha::classname(), [
    'template' => '<div class="col-lg-3">{image} <a href="javascript:;" id="fox">Refresh</a></div><div class="col-lg-3">{input}</div>',
])?> 

验证码的模型代码-

public function rules()
{
    return [
        [['name', 'city', 'description','email'], 'required'],
        [['captcha'], 'captcha']
    ];
}

和js代码刷新layouts / main.php文件中的验证码图像-

<script>
  $("#fox").on('click',function(e){
    //#testimonials-captcha-image is my captcha image id
    $("img[id$='-captcha-image']").trigger('click');
    e.preventDefault();
  })
</script>

Answer 2

这将解决问题，我们可以创建一个中央视图作为验证码的模板，并在任何地方调用它。

<?php
/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model \frontend\models\ContactForm */

?>
<div class="row">
    <div class="col-lg-3">{image} <br /><a id="refresh_captcha" href="javascript:;">Refresh Captcha</a></div>
    <div class="col-lg-6">{input}</div>
</div>
<?php
$this->registerJs('
    $(document).ready(function () {
        $("#refresh_captcha").click(function (event) {
            event.preventDefault();
            $(this).parent().children(\'img\').click();
        })
    });
    ');
?>

对于呼叫，您可以使用：

<?= $form->field($model, 'verificationCode')->widget(yii\captcha\Captcha::className(),[
                'template' => $this->render("/_partials/captcha_template"),
            ]); ?>

这将允许您在所有视图上运行它，因为每个视图的名称和ID可能不同。

$(this).parent().children(\'img\').click();

Answer 3

将其移动到外部文件，您应该可以。
其他解决方案是使用验证码创建窗口小部件，使用代码创建文件，并在调用窗口小部件时注册javascript文件。
或者只是使用javascript创建文件，并记得在每次显示验证码时都进行注册。

寻求第一个解决方案，更容易，您无需构建任何东西，等等。在没有成千上万并发用户的网站上，它会很好地工作。