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

您应该绑定@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
  }
},

Answer 2

我希望这个小例子能帮助您了解如何验证复选框。您必须检查输入何时更改。我建议你使用@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>

因此，如果选择的国家/地区是德国，则条款将有效。

validations: {
  terms: {
    checked(val) {
      return this.country === "germany" ? true : val;
    }
  }
}

当然是国家/地区，术语在 data() 中定义：

country:'',
terms: false

Answer 3

因为 false 也是有效值所以，你应该尝试使用 sameAs

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

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

Answer 4

使用 vuelidate-next（同时支持 Vue 2 和 Vue 3），只需使用 sameAs 内置验证器并将 true 作为直接参数即可。例如，在 setup 方法内部使用时：

const termsAccepted = ref(false)

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

return { v$, termsAccepted }

Answer 5

`

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

`

Answer 6

这对我有用。基本上，您需要将其值 'sameAs' 设为布尔值 'true'，这意味着该复选框已选中。所以，即：

privacyCheck: {
  sameAs: sameAs(true)
},

Vuelidate 复选框验证

Vuelidate check box validation

vue.js

vuelidate

bootstrap-vue