vue3 el-form 表单验证
时间: 2024-10-17 16:01:37 浏览: 12
在 Vue3 中,`<el-form>` 是 Element UI 提供的一个用于创建表单的组件,它结合了 HTML 表单和 Vue.js 的双向数据绑定和指令功能。Vue3 的表单验证通常通过 `v-model` 和自定义事件来进行,而 Element UI 则提供了更丰富的验证方法。
Vue3 的 `el-form` 验证主要依赖以下几个方面:
1. **内置验证规则**:`el-form` 包含了一个 `validate` 方法,可以通过设置 `rules` 属性来配置每个字段的验证规则,例如必填、长度限制、邮箱格式等。比如:
```html
<el-form :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
<el-form-error slot="append">请输入姓名</el-form-error>
</el-form-item>
</el-form>
```
这里的 `rules` 可能会包含 `required`(必需),`minLength` 或 `maxLength`(长度限制)等。
2. **自定义验证**:如果需要更复杂的验证逻辑,可以通过 `@validate` 触发器来编写自定义验证函数,这个函数会在验证时被调用:
```javascript
data() {
return {
form: {},
rules: {
password: [
{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
{ min: 6, message: '密码长度至少为6位', trigger: ['blur'] }
]
},
validateForm: validateForm
};
},
methods: {
validateForm(form) {
// 在这里添加自定义验证逻辑
}
}
```
3. **错误提示**:`el-form` 会在输入不合规时显示错误信息,你可以通过 `<el-form-item>` 的 `error-message` 或者 `el-form` 的 `inline-message` 来控制错误消息的展示位置。
阅读全文