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

【问题标题】：Assign v-validate multiple validation rules (predefined and custom)分配 v-validate 多个验证规则（预定义和自定义）
【发布时间】：2018-07-09 18:17:38
【问题描述】：

我不知道如何为 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 中？如果您需要任何其他信息，请告诉我，我会提供。谢谢！

【问题讨论】：

标签： javascript vuejs2 vee-validate

【解决方案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') }">

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

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

【讨论】：

就是这样！谢谢你，先生！ ;)