如何检查验证是否通过了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验证？

回答

相关问题