我正在使用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
},
}
答案 0 :(得分:1)
As false is also valid value so, you should try to use sameAs
import {sameAs } from 'vuelidate/lib/validators
terms: {
sameAs: sameAs( () => true )
}
答案 1 :(得分:0)
您应该绑定@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
}
},
答案 2 :(得分:0)
我希望这个小例子可以帮助您了解如何验证复选框。 您必须检查输入何时更改。我建议您使用@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
答案 3 :(得分:0)
使用 vuelidate-next(对于 Vue 2 和 Vue 3 支持)就像使用 sameAs
内置验证器和 true
作为直接参数一样简单。例如,在 setup
方法中使用时:
const termsAccepted = ref(false)
const v$ = useVuelidate(
{ termsAccepted: { sameAs: sameAs(true) } },
{ termsAccepted }
)
return { v$, termsAccepted }
答案 4 :(得分:0)
`
validations: {
terms: {
checked: (val) => {return val;}
}
}
`