Vee验证表单提交中的3个捕获错误

Question

如果表单提交在vee验证中失败，我该如何处理？我有以下组件

<template>
<ValidationObserver tag='div' class='bg-white pt-6 pb-6 mb-4' v-slot='{ handleSubmit }'>
<form
@submit.prevent='handleSubmit(onSubmit)'
class='mx-auto rounded-lg overflow-hidden pt-6 pb-6 space-y-10'
:class="{'is-loading' : isLoading}"
>
<div class='flex flex-wrap -mx-3 mb-6'>
<div class='w-full md:w-3/12 px-3 mb-6 md:mb-5'>
<ValidationProvider v-slot='{ classes, errors }' rules='required' name='Anrede'>
<CustomSelect :options='gender'
placeholder='Anrede *'
v-model='form.gender'
:class="classes"
/>
<span class='text-mb-error font-medium text-sm italic'>{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div class='block'>
<button
class='bg-secondary hover:bg-secondary-200 text-white py-3 px-4 w-full mt-5 focus:outline-none'
type='submit'
>
Registrieren
</button>
</div>
</form>
</ValidationObserver>
</template>

作为方法，我有以下功能

onSubmit () {
alert()
console.log(this.$refs.observer)
this.$emit('onSendRegistration', this.form)
}

如果表单有效，但如果失败，则永远不会执行。如果表单验证失败，我在哪里可以捕获？

Answer 1

根据文档：

[handleSubmit]调用类似validate的验证并更改提供程序的状态，仅在验证成功时才接受要运行的回调。

因此，要在验证出错的情况下运行回调，您必须使用ValidationObserver中的ref以编程方式触发验证。

你打开的ValidationObserver标签现在看起来是这样的：

...
<ValidationObserver tag='div' class='bg-white pt-6 pb-6 mb-4' ref='form'>
...

你打开的form标签现在应该是这样的：

...
<form
@submit.prevent='onSubmit'
class='mx-auto rounded-lg overflow-hidden pt-6 pb-6 space-y-10'
:class="{'is-loading' : isLoading}"
>
...

你的onSubmit方法应该是这样的：

onSubmit () {
this.$refs.form.validate().then(success => {
if (!success) {
// run your error code here
}
alert('Form has been submitted!');
});
}

除了这种编程方法之外，在无效表单提交后运行回调函数的handleSubmit没有等效方法。

有关$refs编程访问的更多信息，请查看文档。