表单验证之登录与注册，最后实现登录

原创已于 2023-09-03 22:14:13 修改 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-03 13:45:48 首次发布

前端相应模块领域使用专栏收录该内容

2 篇文章

订阅专栏

本文详细描述了如何使用Element-Plus构建登录和注册页面，涉及静态页面布局、表单验证、接口集成、数据存储、路由管理和退出登录功能。包括使用Vue组件、v-if/v-else切换、表单验证规则、API调用和Pinia状态管理库的应用。

项目:

在线演示：https://fe-bigevent-web.itheima.net/login

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835

接口根路径： http://big-event-vue-api-t.itheima.net

一、登录页与注册页功能的实现

1、静态页面布局：

先做好静态登录与注册的页面布局(element-plus组件Container 布局容器),这个页面组件就叫做login/Login.vue吧（根据element-plus文档填写表单内容的相关属性）

=>最后得到登录与注册页面(这个两个页面属于同一个页面，用v-if.v-else做来回切换)

2、表单验证四部曲：

el-form 整个表单组件

el-form-item 表单的一行（一个表单域）

el-input 表单元素（输入框）

2. 校验相关

(1) el-form => :model="ruleForm" 绑定的整个form的数据对象 { xxx, xxx, xxx }

(2) el-form => :rules="rules" 绑定的整个rules规则对象 { xxx, xxx, xxx }

(3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性

(4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)

注册页：

①先声明整个用于提交的from数据对象

=>然后在表单Dom对象标签绑定 :model="formModel"属性

②绑定整个rules规则对象（用户名规则，密码规则，确认密码规则)

const rules = {

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' },

{ min: 5, max: 10, message: '用户名必须是 5-10位的字符', trigger: 'blur' }

],

password: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{

pattern: /^\S{6,15}$/,

message: '密码必须是 6-15位的非空字符',

trigger: 'blur'

}

],

repassword: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{

pattern: /^\S{6,15}$/,

message: '密码必须是 6-15位的非空字符',

trigger: 'blur'

},

{

validator: (rule, value, callback) => {

// 判断 value 和当前 form 中收集的 password 是否一致

if (value !== formModel.value.password) {

callback(new Error('两次输入密码不一致'))

} else {

callback() // 就算校验成功，也需要callback

}

},

trigger: 'blur'

}

]

}

③给表单元素,绑定from子属性

④在表单元素，prop配置生效的是哪一个规则（这里是prop=username)

⑤最后，提交注册按钮时，进行整个表单验证：=>先获取表单DOM(这里给登录和注册绑定同一个ref值不影响，因为有v-if会自动销毁一个)

=>点击按钮时调用api（ validate() 表单验证方法=>验证通过则弹出信息提示=>此时改变注册表单绑定v-if的值=>跳转到登录页)

const register = async () => {

// 注册成功之前，先进行校验，校验成功 → 请求，校验失败 → 自动提示

await form.value.validate() //校验（失败会自动提示)

await userRegisterService(formModel.value) //请求

ElMessage.success('注册成功')?//请求成功提示

isRegister.value = false//返回到登录页

}

登录页：

①也是四部曲

这里可以同注册表单使用同一个fromModel、rules（就不列举了），登录页唯一不同就是存token

②点击登录按钮时：

调用api(login)=>进行表单验证=>验证通过则调用封装好的获取token的接口=>接口返回的token存储到本地=>最后登录成功，跳转页面

③注册与登录页面切换的时候，记得重置表单

④给路由配置路由守卫

⑤注：以下是封装好的pinia仓库，router,api接口

*stores文件夹

*router文件夹

* api获取数据(图一封装所有请求接口,图二获取token接口)

⑥登录成功渲染数据

1.api/user.js封装接口


// 获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

2.stores/modules/user.js 定义数据

    // 获取用户信息，本存到本地
    const getUser = async () => {
      const res = await userGetInfoService()//请求获取数据
      user.value = res.data.data
    }

3.layout/LayoutContainer（和登录都是一级路由，页面大框架）页面初始化就调用数据

4.渲染数据

<div>
  黑马程序员：<strong>{{ userStore.user.nickname || userStore.user.username }}</strong>
</div>

<el-avatar :src="userStore.user.user_pic || avatar" />

⑦退出登录

1.注册点击事件（el-dropdown组件)

 <el-dropdown placement="bottom-end" @command="handleCommand">//注册点击事件(handleCommand)
          <!-- 展示给用户，默认看到的 -->
          <span class="el-dropdown__box">
            <el-avatar :src="userStore.user.user_pic || avatar" />//用户头像
            <el-icon><CaretBottom /></el-icon>
          </span>
          <!-- 折叠的下拉部分 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="password" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>

2.点击时触发事件

const handleCommand = async (key) => {
  if (key === 'logout') {
    // 退出操作
    await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    // 清除本地的数据 (token + user信息)
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    // 跳转操作
    router.push(`/user/${key}`)
  }
}

3.stores/modules/ user.js 模块提供 setUser 方法(退出传个空对象，清空用户数据)

const setUser = (obj) => (user.value = obj)

这里就完成了登录与注册的开发，同时也在登录成功时做了相应的数据渲染，以及退出登录操作