ValidationProvider需要在提交Vue 2之后进行验证



我使用ValidationObserver和ValidationProvider来验证电子邮件字段。

<ValidationProvider
name="email"
rules="required|max:50|email"
v-slot="{ errors }"
>
<md-field
class="border-round-10 border_box"
:class="{ 'md-invalid': errors.length > 0 }"
>
<label>Email </label>
<md-input
v-model="email"
@blur="greatToSeeYou()"
></md-input>
<span class="md-error">{{ errors[0] }}</span>
</md-field>
</ValidationProvider>

我只想在点击提交按钮后验证电子邮件。我尝试了很多选择,但都没有成功。

配置ValidationProvider有4种模式:aggressivelazyeagerpassive

根据您的要求,您只想在提交时验证表格,这样您就可以选择passive模式

<ValidationProvider
name="email"
rules="required|max:50|email"
v-slot="{ errors }"
mode="passive"
>
...
</ValidationProvider>

以下是我为您提供的代码沙盒示例:

https://codesandbox.io/s/kind-breeze-rbf27?file=/src/components/HelloWorld.vue:146-293

相关内容

  • 没有找到相关文章

最新更新