javascript - 分配 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 属性绑定(bind)到您的数据，因此您可以在其中使用任何您想要的内容。此外，它支持不同的语法 - 一种是您使用的是字符串(即 'required')。 Another form it supports is an object ，这就是您所需要的:

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

我建议您更改计算值以返回 true/false，在这种情况下您可以直接使用它。

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