如何解决Vee验证3个提交表单时发现的错误
如果表单提交在vee-validate中失败,我该如何捕捉?我有以下组件
<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)
}
如果表单有效,则工作正常,但如果失败则永远不会执行。如果表单验证失败,我在哪里可以找到?
解决方法
根据文档:
[{
handleSubmit
]调用验证(如validate和mutate提供者的状态),仅在验证成功后才接受回调。
因此,如果在验证错误时运行回调,则必须使用ref
中的ValidationObserver
以编程方式触发验证。
您的开始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
。
检查文档以获取有关programmatic access with $refs
的更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。