VeeValidate 2.2.5 验证数组
时间: 2023-07-16 14:17:17 浏览: 68
在 VeeValidate 2.2.5 中,可以使用 `each` 规则来验证数组中每个元素是否符合指定规则。
示例:
```html
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="emails">Emails:</label>
<input id="emails" type="text" v-model="emails" />
<span v-show="errors.has('emails')">{{ errors.first('emails') }}</span>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
emails: [],
};
},
methods: {
submitForm() {
this.$validator.validateAll().then((result) => {
if (result) {
// Form submitted successfully
}
});
},
},
validations: {
emails: {
each: {
email: true,
required: true,
},
},
},
};
</script>
```
在上面的示例中,我们定义了一个 `emails` 数组,并在 `validations` 中使用 `each` 规则来验证每个元素是否符合 `email` 和 `required` 规则。在模板中,我们显示了错误消息,如果有任何 `emails` 元素未通过验证,则显示第一个错误消息。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)