登录注册页：表单基本结构
登录注册表单使用 Element Plus 的 el-form 组件构建。表单的核心是 model（数据对象）和 rules（校验规则）的配合。本节搭建登录表单的基本结构，包括用户名输入框、密码输入框、记住密码复选框和登录按钮。
el-form 的基本用法
<template>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-position="top"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="formData.username"
placeholder="请输入用户名"
prefix-icon="User"
/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="formData.password"
type="password"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
/>
</el-form-item>
<el-form-item>
<div class="flex justify-between w-full">
<el-checkbox v-model="formData.remember">
记住密码
</el-checkbox>
<el-link type="primary">忘记密码？</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="w-full"
:loading="loading"
@click="handleSubmit"
>
登录
</el-button>
</el-form-item>
</el-form>
</template>
vue
表单数据与校验规则
import type { FormInstance, FormRules } from 'element-plus'
const formRef = ref<FormInstance>()
const loading = ref(false)
const formData = reactive({
username: '',
password: '',
remember: false,
})
const formRules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度为 3-20 个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度为 6-20 个字符', trigger: 'blur' },
],
}
typescript
关键点
ref绑定：formRef获取表单实例，用于调用validate、resetFields等方法。prop属性：el-form-item的prop必须与formData的字段名对应，rules才能生效。trigger：blur（失焦触发）或change（值变化触发），推荐登录表单用blur。
提交逻辑
const handleSubmit = async () => {
const valid = await formRef.value?.validate().catch(() => false)
if (!valid) return
loading.value = true
try {
// 调用登录 API
await login(formData)
// 跳转到首页
router.push('/')
} catch (error) {
// 错误处理
} finally {
loading.value = false
}
}
typescript
el-input 的常用属性
| 属性 | 说明 | 示例 |
|---|---|---|
prefix-icon | 输入框前缀图标 | User、Lock |
show-password | 密码显示/隐藏切换 | true |
clearable | 一键清空输入 | true |
placeholder | 占位文本 | '请输入用户名' |
Element Plus 内置图标名称可以直接传字符串（如 User、Lock），不需要导入组件。
本节小结
- el-form 结构：
el-form>el-form-item>el-input，通过model和rules绑定数据和校验。 - formRef：用于调用
validate和resetFields等方法。 - prop 属性：必须与
formData的字段名对应，否则校验规则不生效。 - loading 状态：按钮的
loading属性防止重复提交。
↑