vue3 elementplus 表单验证规则
时间: 2023-09-19 13:05:44 浏览: 60
Vue3 的 Element Plus 表单验证规则可以使用内置的 `rules` 属性来设置,具体步骤如下:
1. 在表单项中使用 `v-model` 绑定数据,例如:
```html
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
```
2. 在表单项中使用 `rules` 属性设置验证规则,例如:
```html
<el-form-item label="密码" prop="password" :rules="[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
]">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
```
其中,`rules` 属性是一个数组,每个元素代表一条验证规则。每条规则可以包含以下属性:
- `required`:是否必填,值为 `true` 或 `false`。
- `message`:验证失败时的提示信息。
- `trigger`:触发验证的事件,可选值为 `'blur'`、`'change'` 或 `['blur', 'change']`。
除了上述通用属性外,还可以根据不同的表单项类型设置特定的验证规则,例如:
- `el-input-number`:使用 `min` 和 `max` 属性设置最小值和最大值。
- `el-select`:使用 `required` 和 `options` 属性设置是否必选和选项列表。
- `el-date-picker`:使用 `type` 属性设置日期格式,使用 `required` 属性设置是否必选。
更多详细的表单验证规则可以参考 Element Plus 官方文档:https://element-plus.org/#/zh-CN/component/form#biao-dan-yan-zheng。