javascript - Yii2 验证码刷新或重新加载图像

Question

我正在使用 yii2 附带的高级应用程序模板的默认验证码实现.我尝试了很多次来找到允许我添加 Refresh 图像链接的任何 api 属性，该链接允许用户生成新的 Captcha 图像，但我不知道该怎么做。我尝试了以下 client-side依赖于 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 View 中，我向验证码小部件添加了一个带有 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>',
]) ?>

上面描述的解决方案工作正常，但它必须为所有应用程序的 View 添加不可用的代码，contactAction View 或任何其他使用验证码的 View 除外!因为我无法在包含 Jquery 库之前插入代码。即在 View 中，所以我将它插入到布局的末尾。

这里的问题是:yii2 api 有直接的解决方案吗？或者有什么更好的建议让这个 jquery 代码在 View 中工作？即把它变成纯 JavaScript。

Answer 1

下面的代码对我有用 -

在 View 文件上形成代码以生成验证码图像 -

<?= $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>