VeeValidate 2.2.5 验证chose插件
时间: 2023-07-01 15:04:53 浏览: 51
对于 VeeValidate 2.2.5,可以使用 `confirmed` 规则来验证两个表单字段是否匹配,可以用于验证选择框(`<select>`)的值。例如,如果需要验证两个选择框的值是否相同,可以按照以下方式使用 `confirmed` 规则:
```html
<template>
<div>
<select v-model="selected1">
<option value="">请选择选项 1</option>
<option value="1">选项 1</option>
<option value="2">选项 2</option>
</select>
<select v-model="selected2">
<option value="">请选择选项 2</option>
<option value="1">选项 1</option>
<option value="2">选项 2</option>
</select>
<button @click="submitForm">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
selected1: '',
selected2: ''
}
},
methods: {
submitForm() {
this.$validator.validateAll().then(result => {
if (result) {
alert('验证通过')
}
})
}
},
mounted() {
// 添加验证规则
this.$validator.extend('confirmed', {
validate: (value, { confirmed }) => value === confirmed,
params: ['confirmed']
})
// 添加验证规则的错误提示信息
this.$validator.localize('en', {
messages: {
confirmed: 'The :attribute confirmation does not match.'
},
attributes: {
selected2: '选项 2'
}
})
}
}
</script>
```
在以上示例中,我们使用 `v-model` 指令将选择框的值绑定到 `selected1` 和 `selected2` 变量上,并在点击提交按钮时,使用 `validateAll` 方法对表单进行验证。同时,我们使用 `extend` 方法添加了一个新的验证规则 `confirmed`,并使用 `localize` 方法添加了对应的错误提示信息。在 `localize` 方法中,我们将 `selected2` 映射为中文名称 "选项 2",以便在错误提示信息中显示更为友好的提示。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)