从 VeeValidate 可用规则中,您可以使用 oneOf VeeValidate Rules 验证选择
<ValidationProvider rules="oneOf:1,2,3" name="number" v-slot="{ errors }">
<select v-model="value">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four (invalid)</option>
</select>
<span>{{ errors[0] }}</span>
</ValidationProvider>
但我不知道如何用 radio 盒做到这一点<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
<label>
<input type="radio" value="1" v-model="choice">
One
</label>
<label>
<input type="radio" value="2" v-model="choice">
One
</label>
<label>
<input type="radio" value="3" v-model="choice">
One
</label>
<span>{{ errors[0] }}</span>
</ValidationProvider>
我正在使用 nuxtimport { extend } from 'vee-validate';
import { oneOf } from 'vee-validate/dist/rules';
// Add the required rule
extend('oneOf ', {
...oneOf ,
message: 'Choose one'
});
数据和组件data () {
return {
choice: ''
}
}
components: {
ValidationObserver: ValidationObserver,
ValidationProvider: ValidationProvider
},
VeeValidate 适用于所有其他输入
最佳答案
已编辑
我这样做的方法是将 ValidationProvider 包裹在最后一个 radio 输入周围。像这样:
<label>
<input type="radio" value="1" v-model="choice">
One
</label>
<label>
<input type="radio" value="2" v-model="choice">
Two
</label>
<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
<label>
<input type="radio" value="3" v-model="choice">
Three
</label>
<span>{{ errors[0] }}</span>
</ValidationProvider>
以前我将validationProvider 包裹在每个 radio 输入周围,但我发现如果多个validationProviders 使用相同的名称,则只有最后一个实际得到验证。
关于vue.js - Vee 验证如何验证单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63267951/