vue.js - ValidationProvider 需要在提交 Vue 2 后进行验证

Question

我正在使用 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>

我只想在提交按钮后验证电子邮件。我尝试了很多选择，但没有奏效。

Answer 1

有 4 种模式可供配置ValidationProvider：aggressive、lazy和。eagerpassive

根据您的要求，您只想在提交时验证表单，以便您可以选择passive模式

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

这是我制作的codeandbox示例供您参考：

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