vue-recaptcha 中的验证码表单验证需要错误消息
captcha form validation required error message in vue-recaptcha
我在 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 可以传递以显示表单验证消息?
您可以使用 属性(下方 loginForm.recaptchaVerified
)来跟踪验证码是否已通过验证,如果未通过验证则阻止提交 + 显示消息:
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>
我在 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 可以传递以显示表单验证消息?
您可以使用 属性(下方 loginForm.recaptchaVerified
)来跟踪验证码是否已通过验证,如果未通过验证则阻止提交 + 显示消息:
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>