VeeValidate 不验证不显示的元素
时间: 2023-08-21 07:05:08 浏览: 53
在 VeeValidate 中,可以通过设置 `lazy` 属性来控制表单控件的验证行为。当 `lazy` 属性为 `true` 时,只有在表单控件获取焦点或值发生变化时才会进行验证,否则不会进行验证。
例如,假设你有一个名为 `email` 的表单控件,当它被隐藏时,你可以将其 `lazy` 属性设置为 `true`,这样就可以避免在隐藏的情况下进行验证。示例代码如下:
```
<template>
<div v-if="showEmail">
<input type="email" v-model="email" v-validate="'required|email'" :lazy="true">
<span>{{ errors.first('email') }}</span>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
showEmail: false
}
}
}
</script>
```
在上面的示例代码中,当 `showEmail` 为 `false` 时,`email` 表单控件会被隐藏,并且设置了 `lazy` 属性。这样,即使 `email` 控件处于隐藏状态,也不会进行验证。当 `showEmail` 变为 `true` 时,`email` 控件会显示,并且在获取焦点或值发生变化时才会进行验证。
需要注意的是,如果你使用了 `v-if` 来控制表单控件的显示与隐藏,那么表单控件将会被销毁和重建,因此你需要在销毁前手动调用 `$validator.reset()` 方法来清除验证信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)