在 Vee-Validate 3.0 中使用 ValidationProvider 在某些情况下跳过验证答案

【问题标题】：Skip validation in some cases in Vee-Validate 3.0 using ValidationProvider在 Vee-Validate 3.0 中使用 ValidationProvider 在某些情况下跳过验证
【发布时间】：2019-10-15 19:33:54
【问题描述】：

我有一个自定义文本输入组件，我将其包装在验证提供程序中。

基本上是这样的：

<validation-provider :rules="rules"
                     :vid="vid"
                     :name="name"
                     v-slot="{ errors, classes }"
                     slim>
  <div class="base-text-box"> ... </div>
</validation-provider>

有时我需要验证它，但在某些情况下我不需要它。如果我不需要验证，我不会通过 rules 属性。

但是当我不需要验证我的组件时，如何禁用提供程序？在文档中找不到任何相关属性。

【问题讨论】：

只需将rules 字符串设为空即可。没有规则 - 没有验证 - 没有错误
另外，您可以将规则作为对象而不是字符串传递。对于这种情况，规则看起来像{ required: true, email: true }，然后你可以通过一些规则来操作只是切换真假值。在这种情况下，您需要创建变量，例如 isRequired 并将其传递给您的组件
试图将规则传递为 1) 未定义 2) null 3) 空字符串，在所有情况下输入获取“有效”类以防焦点事件..:(
那是真实的行为......我写了“没有规则 - 没有验证 - 没有错误”。所以这就是为什么当你传递空的rules 时输入是有效的。这是你写的“当我不需要验证时禁用提供程序”的情况。如果您想要其他逻辑，请澄清。可能，您可以在 div 的构造 :class={'invalid': errors.length} 中玩耍，而不是在 v-slot 对象中使用 classes。

标签： vue.js vee-validate

【解决方案1】：

这也扰乱了我的大脑。解决方案是将 mode 属性设置为被动。

如果您需要更大的灵活性，还可以将模式设置为函数。 https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#interaction-modes

<ValidationProvider mode="passive" rules="required" v-slot="{ errors }">
  <!-- Some input -->
</ValidationProvider>

【讨论】：