VeeValidate 用代码设置验证规则
时间: 2023-12-17 11:05:14 浏览: 26
在使用 VeeValidate 进行表单验证时,可以使用代码设置验证规则。以下是一个示例:
```javascript
import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
// 设置必填规则
extend('required', {
...required,
message: '必填项'
});
// 设置邮箱格式规则
extend('email', {
...email,
message: '请输入有效的邮箱地址'
});
```
在上面的代码中,我们使用 `extend` 方法来扩展 VeeValidate 的验证规则。`required` 和 `email` 是 VeeValidate 自带的一些验证规则,我们可以通过 `extend` 方法来覆盖它们的默认配置。在上面的示例中,我们设置了 `required` 规则的错误提示为“必填项”,设置了 `email` 规则的错误提示为“请输入有效的邮箱地址”。
设置好规则后,我们可以在模板中使用 `v-validate` 指令来绑定验证规则。例如:
```html
<template>
<form>
<div>
<label>邮箱</label>
<input type="email" v-model="email" v-validate="'required|email'" />
<span>{{ errors.first('email') }}</span>
</div>
</form>
</template>
```
在上面的代码中,我们使用 `v-validate` 指令来绑定验证规则。`'required|email'` 表示该输入框需要满足 `required` 和 `email` 两个验证规则。`errors.first('email')` 用于显示该输入框的第一个错误信息。