Vuelidate 复选框验证

Question

我正在使用 Vue.js，而且我是新手。我目前正在验证。我曾使用 vuelidate 作为我的验证库。我已经成功地完成了表单验证，但是当我必须检查复选框的验证时出现了问题。

如何检查复选框的验证？另外，我使用 bootstrapvue 来显示复选框。

   <b-col lg="6" md="6" sm="6">
      <label>Bus Route</label>
      <b-form-group>
        <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         v-bind:unchecked-value="$v.selectedRoute.$touch()">
          {{route.text}}</b-form-checkbox>
      </b-form-group>
      <div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
        Field is required
      </div>
    </b-col>

validations: {

      selectedRoute: {
        required
      },
}

Answer 1

由于 false 也是有效值，因此您应该尝试使用 sameAs

import { sameAs } from 'vuelidate/lib/validators'

terms: {
   sameAs: sameAs( () => true ) 
}

Answer 2

您应该绑定@change 方法：

 <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         @change="$v.selectedRoute.$touch()">

你可能想使用自定义函数：

selectedRoute: {
  checked (val) {
    return val
  }
},