分配 v-validate 多个验证规则（预定义和自定义）

Question

我不知道如何将多个规则分配给 vee-validate。通常你管| v-validate 属性中的规则，但问题是我也尝试包含一种自定义方法。

<input id="number" type="tel" v-model="cardDetail.number" v-card-focus
       class="form__input"
       v-validate="'required'" <!-- need to add requireNumberIfCreditCard method -->
       data-vv-validate-on="blur"
       name="number" required>
<label for="number" class="form__label">
    {{ $root.trans.translate('cardNumber') }}
</label>
<p class="form__error" v-show="errors.has('number')">
    {{ errors.first('number') }}
</p>

这是我的javascript

export default {
        data() {
            return {
                cardDetail: {
                    number: '',
                }
            }
        },
        computed: {
            requireNumberIfCreditCard() {
                if (this.paymentMethod === 'creditCard') {
                    return this.cardDetail.number ? "required" : "";
                }
            }
        }
    };

我的 HTML 应该是什么样子，这样我也可以将自定义方法添加到 vee-validate 中？如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

属性 v-validate 绑定到您的数据，因此您可以在其中使用任何您想要的内容。此外，它支持不同的语法 - 一种是您使用的是字符串（即 'required'）。 Another form it supports is an object，这是你需要的：

<input id="number" type="tel" v-model="cardDetail.number" name="number"
       v-validate="{ required: (requireNumberIfCreditCard == 'required') }">

我建议您将计算值更改为 return true/false，这样您就可以直接使用它。

工作示例：https://codesandbox.io/s/km4lw12823

分配 v-validate 多个验证规则（预定义和自定义）

Assign v-validate multiple validation rules (predefined and custom)

javascript

vuejs2

vee-validate