vue-recaptcha 中的验证码表单验证需要错误消息

Posted 2023-02-22

【中文标题】vue-recaptcha 中的验证码表单验证需要错误消息

【英文标题】：captcha form validation required error message in vue-recaptcha

【发布时间】：2018-08-28 02:45:22

【问题描述】：

我在 vue.js 和 Laravel 5.6.7 中关注这个包来实现验证码。

https://github.com/DanSnow/vue-recaptcha#install

vue.js 中的组件代码

<template>
    <div>        
        <vue-recaptcha  v-model="loginForm.recaptcha"
            sitekey="My key">
        </vue-recaptcha> 

        <button type="button" class="btn btn-primary">
            Login
        </button>                            
    </div>
</template>

<script>

</script>

app.js 代码

import VueRecaptcha from 'vue-recaptcha';
Vue.use(VeeValidate);
Vue.component('vue-recaptcha', VueRecaptcha);

问题：

vue-recaptcha 是否有任何名为 required 的属性可以传递以显示表单验证消息？

【问题讨论】：

什么验证信息？你想做什么？

如果我提交表单并且验证码没有勾选，应该说请勾选验证码。

【参考方案1】：

您可以使用属性（下面的loginForm.recaptchaVerified）来跟踪recaptcha 是否经过验证并阻止提交+ 如果没有则显示消息：

JSFiddle 演示：https://jsfiddle.net/acdcjunior/o7aca7sn/3/

代码如下：

Vue.component('vue-recaptcha', VueRecaptcha);

new Vue(
  el: '#app',
  data: 
    loginForm: 
      recaptchaVerified: false,
      pleaseTickRecaptchaMessage: ''
    
  ,
  methods: 
    markRecaptchaAsVerified(response) 
      this.loginForm.pleaseTickRecaptchaMessage = '';
      this.loginForm.recaptchaVerified = true;
    ,
    checkIfRecaptchaVerified() 
      if (!this.loginForm.recaptchaVerified) 
        this.loginForm.pleaseTickRecaptchaMessage = 'Please tick recaptcha.';
        return true; // prevent form from submitting
      
      alert('form would be posted!');
    
  
)

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>

<div id="app">
  <form v-on:submit.prevent="checkIfRecaptchaVerified">
     <div>
        <vue-recaptcha @verify="markRecaptchaAsVerified"
            sitekey="6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-">
        </vue-recaptcha>
     </div>
     Some other fields of the form here...
     <br>
     <button>Submit form</button>
     <hr>
     <div><strong> loginForm.pleaseTickRecaptchaMessage </strong></div>
  </form>
</div>