如何在 vee-validate v3 中创建通用规则？答案

【问题标题】：How to create a generic rule in vee-validate v3?如何在 vee-validate v3 中创建通用规则？
【发布时间】：2021-10-02 14:58:01
【问题描述】：

是否可以创建一个通用的验证规则以在多个元素中使用？

genericRule: {

required:'required',

min:'min',

etc..

}

在表格上

<ValidationProvider
  name="genericRule"
  rules="required|min|etc"
>
<input v-model='a'/>
</ValidationProvider>
<ValidationProvider
  name="genericRule"
  rules="required|min|etc"
>
<input v-model='b'/>
</ValidationProvider>

在第 3 版中，如果我在多个对象中重复相同的规则，我会得到错误的验证。

【问题讨论】：

标签： javascript vue.js vee-validate

【解决方案1】：

是的，您可以在多个ValidationProviders 中引用您的组件中定义的一组验证规则。您必须在 ValidationProvider 上使用 rules 属性，而不是 name 属性。

例如：

在模板中：

<ValidationProvider
  name="fieldA"
  :rules="genericRule"
>
    <input v-model='a'/>
</ValidationProvider>

<ValidationProvider
  name="fieldB"
  :rules="genericRule"
>
    <input v-model='b'/>
</ValidationProvider>

在组件中：

data() {
    return {
        genericRule: {
            required: true,
            min: 0,
            max: 100,
        }
    }
}

【讨论】：

是否可以使用我的自定义 vee 验证文件中的 genericRule？我认为在每个组件中重复代码规则并不理想
如果我们不使用验证文件规则，provider中的name是什么意思？
是的，您可以从另一个文件中导入规则并将其添加到您的数据函数中。 mixin 也可以。基本上任何允许您在模板中引用对象的方式。
name prop 是字段的名称，而不是规则的名称。它用于错误消息中。