配置
我使用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种模式:aggressive
、lazy
、eager
和passive
。
根据您的要求,您只想在提交时验证表格,这样您就可以选择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