Vue3大事件项目1 登录注册验证

创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件：一数据、二规则）

1. 校验相关
       (1) 给当前表单绑上整个的数据对象：el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }  (<el-form-item> </el-form-item>)

<el-form
        :model="formModel"
     
      >

const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

       (2) 绑上对应的校验规则：el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }（注意一一对应）  (<el-form-item> </el-form-item>)

<el-form
        :model="formModel"
        :rules="rules"  
>

const rules = {
  username: [
    {
      required: true,
      message: 'please',
      //blur:失焦触发，change：值改变的时候触发
      trigger: 'blur'
    },
    {
      min: 5,
      max: 10,
      message: 'yhum',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: 'please',
      //blur:失焦触发，change：值改变的时候触发
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '6-15'
    }
  ]
}

       (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性，用户输入的内容才会同步到表单里去。（<el-input><</el-input>）

 <el-input
            v-model="formModel.repassword"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入再次密码"
          ></el-input>

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

 <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

2.

（1）整个表单的校验规则

                1.非空校验 required:true message信息提示 trigger：触发校验的时机
                2.长度校验 min:xx,max:xx
                3.正则校验pattern：正则规则     \s  非空校验
                4.自定义校验 => 自己写逻辑校验（校验函数）   validator:(rule,value,callback) 

• rule   当前校验规则相关的信息
• value   所校验的表单元素目前的表单值
• callback   两种校验方式，{第一种：callback() 代表校验成功。第二种：callback(new Error(错误信息))   代表校验失败。}无论成功还是失败，都要回调     

（2）自定义校验规则

目录

创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件）

全部代码

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
//整个的用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
//整个表单的校验规则
//1.非空校验 required:true message信息提示 trigger：触发校验的时机
//2.长度校验 min:xx,max:xx
//3.正则校验pattern：正则规则
const rules = {
  username: [
    {
      required: true,
      message: 'please',
      //blur:失焦触发，change：值改变的时候触发
      trigger: 'blur'
    },
    {
      min: 5,
      max: 10,
      message: 'yhum',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: 'please',
      //blur:失焦触发，change：值改变的时候触发
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '6-15'
    }
  ],
  repassword: [
    {
      required: true,
      message: 'please',
      //blur:失焦触发，change：值改变的时候触发
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '6-15'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('no'))
        } else {
          callback() //校验成功，也需要正常回调 callback（）
        }
      },
      trigger: 'blue'
    }
  ]
}
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form
        :model="formModel"
        :rules
        ref="form"
        size="large"
        autocomplete="off"
        v-if="isRegister"
      >
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formModel.password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="formModel.repassword"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入再次密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space>
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = false">
            ← 返回
          </el-link>
        </el-form-item>
      </el-form>
      <el-form ref="form" size="large" autocomplete="off" v-else>
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="flex">
          <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space
            >登录</el-button
          >
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = true">
            注册 →
          </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;
  .bg {
    background:
      url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    .title {
      margin: 0 auto;
    }
    .button {
      width: 100%;
    }
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>

注册功能

1.新建 api/user.js 封装

import request from '@/utils/request'

//注册接口
export const userRegisterService = ({ username, password, repassword }) => {
  //return 和 {} 可以省略
  //return request.post('/api/reg', { username, password, repassword })
  request.post('/api/reg', { username, password, repassword })
}

2.页面中调用（LoginPage.vue）

const register = async () => {
  //注册成功之前，先进行校验。校验成功，就发请求；校验失败，自动提示
  //调用validate会触发校验，给用户显示错误提示
  await form.value.validate()
  await userRegisterService(formModel.value)
//调用组件
  ElMessage.success('success')
  isRegister.value = false
}

3.eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

切换的时候，重置表单内容，利用watch监视

        当isRegister变量发生改变时，这段代码就会运行，并清空formModel对象中的所有表单输入字段，从而重置注册表单。watch 可以让你设置一个回调函数，当被监控的数据发生变化时，这个回调函数就会被执行 
 

watch(isRegister, () => {

  formModel.value = {

    username: '',

    password: '',

    repassword: ''

  }

})

登录：封装登录接口

//登录接口post
//不能加花括号，否则就要加return
export const userLoginService = ({ username, password }) =>
  request.post('/api/login', {
    username,
    password
  })

登录：调用方法将 token 存入 pinia 并 自动持久化本地

//调store下的user里的setToken方法
const userStore = useUserStore()
//当你调用useRouter()函数时，它会返回一个路由实例对象，你可以通过这个对象来访问和操作路由相关的功能。
//记得导入
const router = useRouter()
const login = async () => {
  //登录前进行预校验，没通过就不能发请求
  await form.value.validate()
  //调用接口，发送数据
  const res = await userLoginService(formModel.value)
  //把返回的res存到pinia里面去,并且自动持久化到本地
  userStore.setToken(res.data.token)
  //给出提示，登录成功
  ElMessage.success('success')
  //跳转首页
  router.push('/')
}