Vee 验证：isBetween 带有参数的自定义规则不起作用

Question

验证，我正在尝试为我的文本字段创建多个规则，例如：required、minlength、maxLength 并将它们链接在一起，并根据哪个参数传递给 preform 验证

所以我尝试使用文档中的示例：

http://vee-validate.logaretm.com/v2/guide/custom-rules.html#args-and-rule-configuration

const isBetween = (value, { min, max } = {}) => {
  return Number(min) <= value && Number(max) >= value;
};

// The first param is called 'min', and the second is called 'max'.
const paramNames = ['min', 'max'];

Validator.extend('between', isBetween, {
  paramNames //  pass it in the extend options.
});

我的 Vue 模型如下所示：

 <ValidationProvider
                    v-if="item && item.type === 'TEXT_AREA'"
                    :rules="`isBetween:true, 10`"
                    v-slot="{ errors, valid, validate }"
                >
                    <b-form-textarea
                        size="sm"
                        :id="`attribute`"
                        :value="attributeValue"
                        @input="addAttributeValue($event, uid, validate)"
                    />
                    <span>{{ displayError(errors) }}</span>
                </ValidationProvider>

在这里，我尝试传入 IsBeterrn 参数，例如：必需、长度并基于此来进行验证，但我总是将最小值和最大值设为 null，并且参数是数组而不是对象

我的第二个问题是如何在我的自定义规则中使用 vee-validate 中的 required

Answer 1

您有两种指定参数的方法，使用字符串或使用对象。我建议你使用这样的对象方法：

<ValidationProvider
   :rules="{between:[0, 10]}"
>

您有几个错误 - 规则称为 between，因为您在执行此操作时就是这样称呼它的：

Validator.extend('between', isBetween, {
  paramNames //  pass it in the extend options.
});

此外，您不能像在此处那样使用布尔值和数字作为参数：

                :rules="`isBetween:true, 10`"

我指定它的方式，:rules="{between:[0, 10]}" 还允许您根据需要创建 min 和 max 变量，即如果您有一个名为 minValue 的组件数据项，您可以在这样的规则中使用它 :rules="{between:[minValue, 10]}"并且您的规则将对minValue 的更改做出反应。