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、eager和passive。

根据您的要求，您希望仅在提交时验证表单，因此您可以选择 passive 模式

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

这里是我做的codesandbox例子，供大家参考：

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

ValidationProvider 提交后需要验证 Vue 2

ValidationProvider need to validate after submit Vue 2

validation

rules

vue.js

vue-validator

vuejs2