使用带参数的自定义规则（vue js - vee validate）答案

【问题标题】：Use of the custom rules with parameter (vue js - vee validate)使用带参数的自定义规则（vue js - vee validate）
【发布时间】：2019-05-13 12:00:07
【问题描述】：

在这里寻求帮助之前，我查看了 Vee validate 的文档，我在使用带参数的自定义规则时遇到了问题。事实上，我的规则的配置很好，但是我没有找到正确的语法来使它在带有参数的组件中正常工作。我应该在相关字段的v-validate 特征中写什么？

感谢您的帮助，

这是我的规则：

import { Validator } from 'vee-validate';

Validator.extend('isBigger', (value, [otherValue]) => {
    return value <= otherValue;
}, {
    hasTarget: true
});

我试过了，但没用：

<b-form-input ref="bottom"
    name="sampling depth bottom"
    v-validate="{regex: /^-?\d+[.,]?\d{0,10}$/}"
    placeholder="(in cm)"
    v-model="inputSamplingDepthBot"
    ></b-form-input>

<b-form-input
    name="sampling depth top"
    v-validate="{isBigger:'bottom', regex: /^-?\d+[.,]?\d{0,10}$/}"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

【问题讨论】：

从您的代码示例中，您似乎正在尝试实施跨领域规则。您将在此处获得文档：baianat.github.io/vee-validate/guide/…。语法似乎是正确的，你能提供一个 jsfiddle 并更详细地说明你的问题吗？

标签： vuejs2 vee-validate

【解决方案1】：

不需要用花括号把整个东西包起来。试试这个：

<b-form-input
    name="sampling depth top"
    v-validate="'isBigger:bottom, regex: /^-?\d+[.,]?\d{0,10}$/'"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

规则名称和参数都应该作为字符串传递。

如果由于某种原因您需要为参数传递一个变量，您可以使用反引号并插入变量，如下所示：

<b-form-input
    name="sampling depth top"
    v-validate="`isBigger:${someVariable}, regex: /^-?\d+[.,]?\d{0,10}$/`"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

【讨论】：