如何使用Vee Validate检查验证是否通过？

Question

我有多步骤表格。每个步骤都有其自己的验证，每个步骤都有一个“下一步”按钮。

我想检查每当单击下一步按钮时，表单是否通过验证，如果验证失败，请阻止进行下一步。

这是我的表格

<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
    }
},

即使验证失败，此代码也会前进到下一步。

我该如何进行这项工作？

Answer 1

我不认为您需要validate明确致电。错误将被自动检测。在您的NeXTStep的方法，你可以只检查是否存在有任何错误，并返回，如果有。

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

    ...
}

此外，nextStep如果有任何错误，如何禁用调用按钮？

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