时间戳

首页 > 解决方案 > 使用带参数的自定义规则（vue js - vee validate）

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

问题描述

我在这里寻求帮助之前查看了 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>

标签： vuejs2vee-validate

解决方案

无需将整个东西包裹在花括号中。试试这个：

<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>

推荐阅读