如何檢查驗證是否通過了Vee驗證？

我有多步形式。每一步都有自己的驗證，每一步都有一個「下一步」按鈕。如何檢查驗證是否通過了Vee驗證？

我想檢查表單是否通過驗證，每當下一個按鈕被點擊時，如果驗證失敗，請阻止移動到下一步。

這裏是我的形式

<form method="post"> 
    <div id="step1" v-show="step == 1"> 
    <div class="form-group" :class="{'has-error': errors.has('startDate') }"> 
     <label for="startDate">Start Date</label> 
     <input type="text" name="startDate" class="form-control" id="startDate" v-validate="'required'"> 
     <span v-show="errors.has('startDate')" class="text-danger">@{{ errors.first('startDate') }}</span> 
    </div> 
    <div class="form-group" :class="{'has-error': errors.has('adDuration') }"> 
     <label for="">Ad Duration</label> 
     <select class="form-control" name="adDuration" v-on:change="total" v-model="adDetailOrder.unit" v-validate="'required'"> 
     <option v-for="adDuration in adDurations" :value="adDuration.unit">@{{ adDuration.text }}</option> 
     </select> 
     <span v-show="errors.has('adDuration')" class="text-danger">@{{ errors.first('adDuration') }}</span> 
    </div> 
    </div> 

    <div id="step2" v-show="step == 2"> 
    //input form and v-validate goes here 
    </div> 

    <div id="step3" v-show="step == 3"> 
    //input form and v-validate goes here 
    </div> 
</form> 

<button v-if="step == 1" type="button" class="btn btn-default" v-on:click="nextStep(2)">Next</button> 
<button v-if="step == 2" type="button" class="btn btn-default" v-on:click="nextStep(3)">Next</button> 
<button v-if="step == 3" type="button" class="btn btn-default" v-on:click="nextStep(4)">Next</button>

下一個按鈕來運行這個方法。

nextStep: function(stepNumber) { 
    //check validation step 1 
    if (this.step == 1) { 
     this.$validator.validate('startDate', this.startDate); 
     this.$validator.validate('adDuration', this.adDuration); 

     //if step 1 validation success 
     //go to next step 
     this.step = stepNumber; 

     //else 
     //stay this step and show error 
    } 
},

即使驗證失敗，該代碼也會進入下一步。

我該如何做這項工作？

來源

2017-06-18 Dark Cyber

你有沒有想過如何做到這一點？ – Jernej

我不相信你需要明確地致電validate。錯誤將被自動檢測。在你的nextStep方法中，你可以檢查是否有是任何錯誤，如果存在則返回。

nextStep: function(stepNumber) { 
    if (this.errors.any()) 
     return 

    ... 
}

另外，怎麼樣禁用，如果有任何錯誤調用nextStep按鈕？

<button :disabled="errors.any()" @click="nextStep">Next</button>

來源

2017-06-18 17:49:56 Bert

你的靈魂只適用於第1步驗證，另一步不行，我只是用我的表單結構進行編輯，請你檢查一下嗎？ –

@DarkCyber它爲什麼只適用於第1步？假設你創建了表單，並且所有的表單都在相同的範圍內使用了驗證（看起來他們是這樣做的），'errors.any（）'應該返回每一步的錯誤。也許你可以在小提琴中創建一個工作示例。 – Bert

如何檢查驗證是否通過了Vee驗證？

回答

相關問題