Question

我正在使用yii2附带的高级应用程序模板的默认Captcha实现。我花了很多时间找到任何api属性，允许我添加Refresh图像链接，允许用户生成新的Captcha图像，但我无法弄清楚如何做到这一点。我根据Jquery尝试了以下client-side解决方案：

<!-- 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的{{1}}视图中，我将一个ID为contactAction的链接添加到验证码的小部件中，如下所示：

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>', ]) ?>视图或任何其他使用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创建一个文件，并记住每次显示验证码时都要注册它。

寻找第一个解决方案，更简单，您不需要构建任何东西等。在没有数千个并发用户的网站上，它可以正常工作。

Yii2 Captcha刷新或重新加载图像

3 个答案: