在 VueJS 2.0 上使用 vee-validate 至少需要两个字段之一答案

【问题标题】：Require at least one of two fields using vee-validate on VueJS 2.0在 VueJS 2.0 上使用 vee-validate 至少需要两个字段之一
【发布时间】：2017-11-10 08:21:19
【问题描述】：

我正在使用vee-validate，我有两个字段；一个用于家庭电话，一个用于手机。我不需要同时为规则设置 'required'，但我需要的是至少其中一个是必需的。

那么，我的问题是，是否可以设置一个规则来检查两个字段中至少一个字段的输入？

【问题讨论】：

标签： validation vuejs2

【解决方案1】：

好的，没用多久，但我有这个工作。只是花了一点时间，所以发布我的答案，以便帮助其他人。

首先，我的输入字段是homephone 和cellphone，并且至少其中一个是必需的。

这可以使用 Vue 中的计算属性来实现：

computed: {
    isHomePhoneRequired() {
        if(this.cellphone === '')
            return true; // homephone is required
        return false;
    },
    isCellPhoneRequired() {
        // check if homephone is empty
        if(this.homephone === '')
            return true; // cellphone is required
        return false;
    }
}

我的 HTML 如下所示：

<div class="form-group" :class="{'has-error': errors.has('homephone') }">
    <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="homephone" v-validate ="{ rules: { required: this.isHomePhoneRequired} }" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
    <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
</div>
<div class="form-group" :class="{'has-error': errors.has('cellphone') }">
    <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="cellphone" v-validate ="{ rules: { required: this.isCellPhoneRequired} }" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
    <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
</div>

请注意，v-validate 现在获取传递的对象，其中包含类型 (rules)、要使用的验证 (required) 和计算属性 (isHomePhoneRequired)。

【讨论】：

我认为您可以使用自定义验证规则来做到这一点 - vee-validate.logaretm.com/rules.html#custom-rules

【解决方案2】：

我认为没有必要使用计算，我们可以通过检查另一个输入模型的验证规则的条件来简单地在 HTML 本身中实现它，如下所示：

        <div class="form-group" :class="{'has-error': errors.has('homephone') }">
            <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: cellphone?false:true} }" class="form-control" v-model="homephone" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
            <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
        </div>
        <div class="form-group" :class="{'has-error': errors.has('cellphone') }">
            <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: homephone?false:true} }" class="form-control" v-model="cellphone" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
            <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
        </div>

【讨论】：

【解决方案3】：

对于通过绑定rules 使用 Vee-Validate ValidationProvider 的任何人

如果cellPhone 为空或空字符串，则需要homePhone

<ValidationProvider
  v-slot="{ errors }"
  vid="homePhone"
  :rules="{
    required: !cellPhone || cellPhone.length === 0,
  }"
  name="Home Phone"
>

和cellPhone一样

<ValidationProvider
  v-slot="{ errors }"
  vid="cellPhone"
  :rules="{
    required: !homePhone || homePhone.length === 0,
  }"
  name="Cell Phone"
>

【讨论】：