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

Question

我使用的是vee-validate，我有两个字段;一个用于家庭电话和一个用于手机。我不需要为规则创建'所需的'，但我需要的是至少需要其中的一个。

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

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-验证现在被传递包含对象类型（规则），使用验证（必需）和计算属性（isHomePhoneRequired）。