VeeValidate 2.2.5 验证 chosen
时间: 2023-07-16 21:17:03 浏览: 82
Vue中使用vee-validate表单验证的方法
您可以使用`vee-validate`的`exists`规则来验证`chosen`选择框中是否有选项被选中。以下是一个示例:
```html
<template>
<div>
<select v-model="selectedOption" class="chosen-select">
<option value="">请选择</option>
<option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
</select>
<p v-if="errors.has('selectedOption')" class="text-danger">{{ errors.first('selectedOption') }}</p>
</div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider,
},
data() {
return {
selectedOption: '',
options: [
{ label: '选项 1', value: 'option1' },
{ label: '选项 2', value: 'option2' },
{ label: '选项 3', value: 'option3' },
],
};
},
validations() {
return {
selectedOption: {
exists: {
message: '请选择一个选项',
},
},
};
},
};
</script>
```
在上面的代码中,我们使用`exists`规则来验证`selectedOption`是否存在,并将错误消息设置为“请选择一个选项”。如果未选择任何选项,则将显示此错误消息。如果选择了任何选项,则不会显示任何错误消息。
请注意,我们在`select`元素上添加了一个CSS类`chosen-select`,这是因为我们使用了`chosen`库来创建更好的选择框。如果您没有使用`chosen`库,可以删除该类。
阅读全文