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

已于 2024-04-10 10:03:00 修改
阅读量1.2k 收藏 16
点赞数 12
文章标签： vue.js 前端 javascript
于 2024-04-07 15:45:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63298649/article/details/137384698
版权

创建项目

b54a388b53b643d48a040e49d7b5d14b.png

引入 element-ui 组件库

4f066e598fe846d98d30ccf4e09d3cfb.png

登录：注册样式准备之后，配置校验规则（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: ''

  }

})

登录：封装登录接口

9d6e027f43b0420b9b4a29032974b8af.png

//登录接口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('/')
}

 

 

weixin_63298649
关注
  • 12
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue（1登录注册、2.mockjs介绍，首页导航+左侧菜单、）
m0_64863860的博客
10-11 2069
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
Vue3实战一：搭建项目和登录
shieryue_2016的博客
12-06 900
定义变量未使用报错处理：vue.config.js 添加以下设置。创建项目：vue create hotel_manager。3、config/conster.js常量。4、config/msg.js消息工具类。5、api/admin.js 用户接口。二、绘制登录页面和执行登录功能。2、request.js工具类。安装element-plus。路由守卫和路由跳转顶部加载。安装NProgress。6、绘制登录和执行登录。创建路由router。7、md5引入和加密。
75- vue3案例 - 06-注册登录相关
m0_58250910的博客
10-25 1193
/ 注册,整个用于提交的form对象})</script>...// 注册,整个用于提交的form对象...// 整个表单的校验规则// 1. 非空校验 required: true ,message消息提示, trigger触发校验的实际 blur(失焦)change(实时)// 2. 长度校验 mix:xxx, max:xxx// 3. 正则校验 pattern: 正则规则 \S:非空字符// 4. 自定义校验 => 自己写逻辑校验(校验函数)
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
最新发布
dafsq的博客
05-27 3399
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
用vue3写登录注册功能
weixin_45980586的博客
11-29 3370
而是会在后台进行。因此，为了确保程序能够继续执行其他任务，我们需要使用异步函数来处理这些操作。通过这种方式，我们可以确保在异步操作完成后再执行后续的代码，避免了阻塞主线程的问题。首先，我们需要创建一个Vue 3项目，并安装所需的依赖。函数被声明为异步（async）的原因是为了处理。接下来，我们将编写登录和注册功能。"登录失败，请检查用户名和密码。下面是一个示例代码，展示了如何将。"注册失败，请检查输入信息。在JavaScript中，在上面的示例中，我们使用了。在函数体内，我们可以使用。
Vue3使用el-form实现登录、注册功能，且进行表单验证（Element Plus中的el-form）
weixin_65793170的博客
09-11 1万+
Element Plus 中的 el-form 是一个表单组件，用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则，使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ，这两天在vue3中用到了表单登录，这里来记录一下。
Vue3实现登录表单验证
前端小攻城狮的博客
06-14 7021
使用async-validator实现表单验证
vue实现登录页面的验证码以及验证过程解析(面向新手)
10-16
在Vue.js中实现登录页面的验证码功能涉及到前端交互与安全验证的重要环节，这对于任何Web应用来说都是必不可少的。本文将详细解析如何在Vue环境中构建一个验证码组件，包括生成验证码图片和进行验证的过程。 首先，...
vue.js实现用户评论、登录、注册、及修改信息功能
10-19
登录和注册按钮绑定了事件处理函数，例如`@click="login()"`，这会在用户点击按钮时调用Vue实例中的`login`方法。这些方法通常负责处理用户输入验证、发送Ajax请求到服务器以执行实际的登录或注册操作。 注册功能...
vue登录注册实例详解
12-10
步骤一 1.安装脚手架:npm install vue-cli -g 2.wepack生成html模版：vue init webpack ‘ 文件名’ 3.安装axios、js-cookie、element-ui、stylus等等常用插件 步骤二 1.在main.js中引入router、element-ui等 import Vue from 'vue' import store from './store' //可以先忽略 import App from './App' import router from './router' import ElementUI from 'element
vue前端登录注册页面
04-01
在"vue前端登录注册页面"项目中，Vue.js 的核心特性被充分利用，为开发者提供了一种高效、灵活的方式来设计和实现用户交互性强的登录和注册功能。这个项目旨在提供一个可以直接引入、快速部署的解决方案，帮助开发者...
vue.js表单密码强度验证代码
06-24
在开发Web应用时，表单验证是不可或缺的一部分，特别是在用户注册环节。Vue.js，作为一个流行的JavaScript框架，提供了强大的数据绑定和响应式特性，使得构建动态交互的表单变得简单。本教程将深入探讨如何在Vue.js...
基于VUE3 vue test utils的前端自动化测试项目
03-23
在本文中，我们将深入探讨如何基于Vue3和Vue Test Utils构建一个前端自动化测试项目，以及相关的知识点。Vue3是Vue.js框架的最新版本，它带来了许多优化和改进，包括更简洁的API、Composition API和更好的性能。Vue ...
vue3项目之登录注册业务实现
m0_63907100的博客
03-02 974
登录注册业务实现
vue3使用localStorage实现登录注册
qq_50951790的博客
01-14 4846
vue3使用将新用户信息存储到localStorage存储实现登录注册
vue3_ts setup语法糖做一个登录注册
热门推荐
编程知识分享，主打前端
03-26 3万+
vue3 ts 语法糖搭建一个简单的登录系统平台
VUE3带有登录token验证的登录重定向
weixin_51263829的博客
12-13 1147
自用留一下写法，和VUE2有点不一样。
vue3 element-plus 表单验证
06-28
### 回答1： Vue3 Element Plus 提供了丰富的表单验证功能，可以通过设置表单项的规则来实现验证。具体步骤如下： 1. 在表单项中设置规则，例如： ``` <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> ``` 其中，prop 属性指定了该表单项的唯一标识符，用于后续的验证。 2. 在表单中设置验证规则，例如： ``` <el-form :model="form" :rules="rules"> <!-- 表单项省略 --> </el-form> ``` 其中，rules 属性指定了一个对象，该对象的属性名与表单项的 prop 属性对应，属性值为一个数组，表示该表单项的验证规则。 3. 定义验证规则，例如： ``` data() { return { form: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } } } ``` 其中，每个验证规则是一个对象，包含以下属性： - required：是否必填 - message：验证失败时的提示信息 - trigger：触发验证的事件，例如 blur 表示失去焦点时触发 - min：最小长度 - max：最大长度 以上就是 Vue3 Element Plus 表单验证的基本使用方法。需要注意的是，验证规则可以自定义，例如使用正则表达式进行验证。另外，表单验证还可以通过编程方式进行，例如在提交表单时手动调用验证方法。 ### 回答2： Vue3是Vue.js框架的最新版本，与之搭配的Element Plus是一套基于Vue3的UI组件库。表单验证是Web开发中一个非常重要的功能，Element Plus提供了强大的表单验证功能，可以帮助开发者轻松地实现表单的数据校验。 首先，在使用Element Plus进行表单验证之前，需要安装Element Plus并引入相应的组件。可以通过以下命令来安装Element Plus： ``` npm install element-plus --save ``` 安装完成后，在Vue3组件中可以直接引入Element Plus提供的组件： ``` import { ElForm, ElFormItem, ElInput } from 'element-plus'; ``` 其中，ElForm是用于包裹整个表单的组件，ElFormItem是表单中的每个表单项，ElInput是一个基础的文本输入框。 在引入相应的组件之后，就可以开始进行表单验证的设置了。Element Plus提供了多种验证规则，包括必填项、最大长度、最小长度、正则表达式等。以下是一个基本的表单验证示例： ``` <template> <el-form :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm()">提交</el-button> </el-form-item> </el-form> </template> <script> import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, data() { return { form: { name: '', email: '', }, rules: { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], email: [ { required: true, message: '邮箱不能为空', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] } ], }, }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { alert('验证通过'); } else { alert('验证失败'); return false; } }); }, }, }; </script> ``` 在上述示例中，通过将表单数据与验证规则绑定，实现了表单验证的功能。其中，prop属性用于指定每个表单项在form数据中的属性名，用于与验证规则进行绑定。required表示必填项，message为验证失败时的提示信息，trigger表示触发验证的方式，blur表示失去焦点时触发验证，change表示值改变时触发验证。 上述示例中，`this.$refs.form.validate`方法用于触发表单验证，如果验证通过则执行`if (valid)`代码块中的代码，否则执行`else`代码块中的代码。 总之，Element Plus提供了强大的表单验证功能，可以方便地实现表单数据校验。开发者可以根据实际需求设置不同的验证规则，从而提高表单数据的正确性和完整性，提升Web应用程序的用户体验。 ### 回答3： Vue3 Element Plus 是一种基于 Vue3 开发的 UI 库，具有更高的性能和更好的扩展性。表单验证是 Vue3 Element Plus 中非常重要的功能，可以用于确保用户输入的数据有效和正确。 Vue3 Element Plus 表单验证的基本原理是利用 Vue3 的响应式系统监控表单中输入内容的变化，通过设置条件进行判断和验证输入内容是否合法，最终反馈验证结果，通常会在表单输入框的下面显示错误提示信息。 Vue3 Element Plus 表单验证功能提供了多种验证方式，包括必填验证、长度验证、邮箱验证、URL 验证、手机号验证、正则验证等等。用户在使用时可以根据具体的需求选择合适的验证方式，也可以自定义一些验证规则来满足特殊要求。 Vue3 Element Plus 表单验证的使用步骤如下： 1. 在 HTML 页面中引入 Vue3 和 Element Plus 的库文件。 2. 在 Vue3 组件中引入 Element Plus 的表单组件，并设置表单数据和验证规则。 3. 绑定表单数据到页面，例如使用 v-model 绑定到输入框中。 4. 在需要验证的输入框中设置验证规则，例如使用 rules 数组设置表单验证规则。 5. 在表单提交时进行验证，如果验证失败则阻止提交操作，并将错误信息反馈给用户。 Vue3 Element Plus 表单验证非常简单易用，对于开发者来说可以极大的减少代码量，提高开发效率。同时，它还提供了丰富的错误提示和交互方式，可以让用户清晰地知道输入错误的原因并及时进行更正。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值