Question

我正在使用vee-validate，我有两个字段;一个用于家庭电话，一个用于手机。我不需要为规则制作＆＃39; ，但我需要的是至少其中一项所需。

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

Answer 1

好的，没多久，但我有这个工作。它只是需要一些挖掘，所以发布我的答案，以便它可以帮助其他人。

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

使用以下内容在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 现在获取一个传递的对象，其中包含类型（规则），要使用的验证（必需）和计算属性（isHomePhoneRequired）。

Answer 2

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

Answer 3

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

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

cellPhone

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

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

3 个答案: