验证码表单验证所需的错误消息，在vue-recaptcha中 [英] captcha form validation required error message in vue-recaptcha

问题描述

我正在vue.js和Laravel 5.6.7中遵循此Package来实现验证码.

I am following this Package in vue.js and Laravel 5.6.7 to implement captcha.

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的任何属性?

Is there any property for vue-recaptcha called required which can be passed to show the form validation message?

推荐答案

您可以使用属性(下面的loginForm.recaptchaVerified)跟踪是否验证了验证码，如果没有验证，则阻止提交+显示消息:

You can use a property (loginForm.recaptchaVerified below) to track if the recaptcha was verified and prevent submit + display a message if not:

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

JSFiddle demo: 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>

这篇关于验证码表单验证所需的错误消息，在vue-recaptcha中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！