
登录演示和功能拆解

表单基础校验实现
1. 基础双向绑定
<template>
<el-form>
<el-form-item label="账号">
<el-input v-model="formData.username" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formData.password" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="formData.remember">记住我</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login_btn">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Login',
data() {
return {
formData: {
username: '',
password: '',
remember: ''
}
}
}
}
</script>
2. 表单校验配置
- 按照业务要求编写校验规则对象(rules)
- el-form组件绑定表单对象(model)和规则对象(rules)
- el-form-item组件通过prop属性指定要使用的校验规则
<template>
<el-form :model="formData" :rules="rules">
<el-form-item
label="账号"
prop="username"
>
<el-input v-model="formData.username" />
</el-form-item>
<el-form-item
label="密码"
prop="password"
>
<el-input v-model="formData.password" />
</el-form-item>
<el-form-item prop="remember">
<el-checkbox v-model="formData.remember">记住我</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login_btn">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Login',
data() {
return {
formData: {
username: '',
pas