Validation 需要在VueJS 2.0上使用vee validate的两个字段中至少有一个字段

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

---

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

好的，没有花太多时间，但我有这个工作。这只是需要一点挖掘，所以张贴我的答案，这样可以帮助别人

首先，我的输入字段是家庭电话和手机，至少需要其中一个

使用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;
        }
    }

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

我的HTML如下所示：

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

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

家庭电话
{{{errors.first（'homephone'）}
手机
{{{errors.first（'mobile'）}

---

请注意，v-validate现在获得一个传递的对象，其中包含类型（规则）、要使用的验证（必需）和计算属性（isHomePhoneRequired）。

我认为使用computed是没有必要的，我们可以通过检查另一个输入模型的验证规则的条件，简单地在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>

家庭电话
{{{errors.first（'homephone'）}
手机
{{{errors.first（'mobile'）}

适用于通过绑定

规则使用Vee Validate
ValidationProvider的任何人

如果
mobile
为null或空字符串，则需要使用
homePhone

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

我认为您可以使用自定义验证规则来完成此操作-