Vue-recaptcha验证码表单必填验证错误求助（Vue.js+Laravel5.6.7）

Hey there, let's get that reCAPTCHA required validation sorted out for your login form. I've run into this exact issue before, so here's what you need to do:

First, Understand the Root Issue #

The vue-recaptcha component uses v-model to bind the verification token, but it only populates that value after the user completes the reCAPTCHA challenge. VeeValidate's default required validation checks for the field's initial empty value, so it throws an error even before the user interacts with the reCAPTCHA. Also, we need to make sure VeeValidate listens to changes on the reCAPTCHA field properly.

Step-by-Step Solution #

1. Double-Check Your App.js Setup #

First, confirm both libraries are registered correctly in your app.js:

// app.js
import Vue from 'vue';
import VueRecaptcha from 'vue-recaptcha';
import VeeValidate from 'vee-validate';

// Initialize VeeValidate
Vue.use(VeeValidate);

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

// Boot your Vue app
const app = new Vue({
    el: '#app'
});

2. Update Your Login Component with Validation Logic #

Here's the complete component code with proper validation handling. We'll add custom validation rules, listen to reCAPTCHA events, and handle form submission checks:

<template>
  <div>
    <vue-recaptcha 
      v-model="loginForm.recaptcha" 
      sitekey="YOUR_RECAPTCHA_SITE_KEY"
      @verify="onRecaptchaVerify"
      @expired="onRecaptchaExpired"
    ></vue-recaptcha>
    <!-- Show validation error message -->
    <span v-show="errors.has('recaptcha')" class="text-danger">
      {{ errors.first('recaptcha') }}
    </span>

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

<script>
export default {
  data() {
    return {
      loginForm: {
        recaptcha: ''
      }
    };
  },
  mounted() {
    // Register a custom validation rule for reCAPTCHA
    this.$validator.extend('recaptcha', {
      getMessage: () => 'Please complete the reCAPTCHA verification.',
      validate: value => value !== ''
    });
  },
  methods: {
    onRecaptchaVerify(response) {
      // Update form value and trigger validation to clear errors
      this.loginForm.recaptcha = response;
      this.$validator.validate('recaptcha');
    },
    onRecaptchaExpired() {
      // Reset field and mark as invalid when reCAPTCHA times out
      this.loginForm.recaptcha = '';
      this.$validator.invalidate('recaptcha');
    },
    async submitLogin() {
      // Validate all fields including reCAPTCHA before submission
      const isValid = await this.$validator.validateAll();
      if (!isValid) return;

      // Proceed with your login logic (e.g., send request to Laravel backend)
      try {
        const response = await this.$axios.post('/login', this.loginForm);
        // Handle successful login
      } catch (error) {
        // Handle login errors
      }
    }
  }
};
</script>

3. Key Details to Note #

• Custom Validation Rule: The default required rule doesn't play well with reCAPTCHA's async value update, so we created a custom rule that checks if the token exists.
• Event Handling: The @verify event fires when the user completes the challenge—we use this to update our form value and trigger validation. The @expired event resets the field and marks it invalid when the reCAPTCHA times out.
• Submission Check: We run validateAll() before sending the login request to ensure all fields (including reCAPTCHA) are valid.

4. Quick Additional Checks #

• Make sure your reCAPTCHA site key matches the one from your Google reCAPTCHA admin console.
• If the reCAPTCHA script isn't loading automatically, add it manually to your Laravel blade template:

  <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
  

That should fix the required validation issue! Let me know if you hit any other roadblocks.

内容的提问来源于stack exchange，提问作者Pankaj