Vue.js Vuelidate复选框验证

我正在使用Vue.js，我对它还不熟悉。我目前正在进行验证。我使用vuelidate作为我的验证库。我已经成功地完成了表单验证，但当我必须选中“验证”复选框时，麻烦来了

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

如何选中复选框的验证？此外，我还使用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
      },
}

巴士路线
{{route.text}
字段是必需的
验证：{
所选路线：{
必修的
},
}

您应该绑定@change方法：

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

---

我希望这个小示例将帮助您理解如何验证复选框。 您必须检查输入何时更改。我建议您使用@change

模板中

<div class="input">
  <label for="country">Country</label>
  <select id="country" v-model="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
    <option value="germany">Germany</option>
  </select>
</div>
<div class="input inline" :class="{invalid: $v.terms.$invalid}">
  <input type="checkbox" id="terms" v-model="terms" @change="$v.terms.$touch()">
  <label for="terms">Accept Terms of Use</label>
</div>

当然，术语是在data（）中定义的：

---

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

sameAs

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

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

使用（对于Vue 2和Vue 3支持），它非常简单，只需将

sameAs

内置验证器与

true

作为直接参数即可。例如，在

设置中使用
方法时：

const termsAccepted = ref(false)

const v$ = useVuelidate(
  { termsAccepted: { sameAs: sameAs(true) } },
  { termsAccepted }
)

return { v$, termsAccepted }

`

`
您可以发布您的数据吗（）？您是如何初始化selectedRoute的？几乎更像：
术语：{sameAs:val=>val==true}
@zenw0lf您的建议不起作用，因为根据文档：“当作为函数提供时，它接收验证中的模型作为参数”而不是值。因此它更像是
terms:{sameAs:vueModel=>vueModel.terms==true}
在任何情况下，由帖子所有者提供的解决方案都是最好的。@icosmin阅读有关自定义验证器的部分。它起作用了。我已经使用并测试了要求用户接受ToS等的验证器。它不起作用
import { sameAs } from 'vuelidate/lib/validators'

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

const termsAccepted = ref(false)

const v$ = useVuelidate(
  { termsAccepted: { sameAs: sameAs(true) } },
  { termsAccepted }
)

return { v$, termsAccepted }

validations: {
    terms: {
        checked: (val) => {return val;}
    }
}