要求兩個字段中的至少一個在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）。