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-inputv-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-inputv-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":rulesref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-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-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-inputname="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('/')
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/797852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云服务器是不是云盘?

​  云服务器是不是云盘?云服务器和云盘是两个不同的概念&#xff0c;尽管它们都是云计算服务的一部分。云服务器是一种提供计算能力的服务&#xff0c;可以运行各种应用程序和服务&#xff0c;而云盘则是一种提供数据存储和共享服务的工具。 具体来说&#xff1a; 云服务器…

【Qt】事件

目录 一、介绍 二、进入离开事件 三、鼠标事件 3.1 鼠标单击事件 3.2 鼠标释放事件 3.3 鼠标双击事件 3.4 鼠标移动事件 3.5 滚轮事件 四、按键事件 4.1 单个按键 4.2 组合按键 五、定时器 5.1 QTimerEvent类 5.2 QTimer类 5.3 获取系统日期及时间 六、窗口移…

插值表达式

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>插值表达式</title> </head> &l…

两个有序的链表合并成一个【C语言】

比如&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4 #include <stdio.h> #include <stdlib.h>typedef struct Node {int data;struct Node* next; } Node, *LinkedList;// 创建一个新节点 Node* cr…

理解七层网络协议

osi体系结构 上三路&#xff08;管数据&#xff09; 应用层 通过http等&#xff0c;把传输的格式&#xff0c;数据打包 处理网络应用。直接为端用户服务&#xff0c;提供各类应用过程的接口和用户接口。例如&#xff1a;HTTP、Tenlent、FTP、SMTP、NFS等。基于TCP的FTP、HTTP…

mySql数据库学习001-创建数据表及表数据的增删改操作

创建数据表及表数据的增删改操作 一、创建数据库 create table if not exists user(id int unsigned primary key auto_increment,username varchar(20),gender enum(男,女,保密) default 保密 )解释&#xff1a; if not exists 表示数据表不存在就创建&#xff1b;unsigned…

蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子(C++)

题目描述 在一个高度为H的箱子前方&#xff0c;有一个长和高为N的障碍物。 障碍物的每一列存在一个连续的缺口&#xff0c;第i列的缺口从第l各单位到第h个单位&#xff08;从底部由0开始数&#xff09;。 现在请你清理出一条高度为H的通道&#xff0c;使得箱子可以直接推出去。…

深度学习理论基础(二)深度神经网络DNN

目录 一、基础知识点Ⅰ 参数部分Ⅱ 模型部分 二、深度神经网络模型搭建1. 准备数据集2. 划分数据集3. 搭建模型4. 训练网络5. 测试网络6. 保存与导入模型 神经网络通过学习大量样本的输入与输出特征之间的关系&#xff0c;以拟合出输入与输出之间的方程&#xff0c;学习完成后&…

Qt Creator 设置 One Dark Pro主题

这个是我基于上网很多教程设置 C 美化加一些基本的配置&#xff0c;下载这个导入一键设置&#xff0c;省去很多烦恼&#xff01;&#xff01;&#xff01; Qt Creator 13.0.0 (Community) 新版的 Qt 编辑器还需要一个文件&#xff0c;不然主界面黑屏&#xff0c;网上很多教程都…

window系统实现不同版本的python(Anaconda)

1.创建不同的环境 https://blog.csdn.net/wz947324/article/details/80228679&#xff1b; https://blog.csdn.net/miracleoa/article/details/106115730&#xff1b; 2.cuda不用版本安装 https://www.bilibili.com/video/BV1nL4y1b7oT/?spm_id_from333.337.search-card.al…

每日一题(leetcode31):下一个排列-思维

思路&#xff1a;从后往前找到第一个nums[i-1]>nums[i] 然后从后往前(len-1 -->i(包含))找到第一个大于nums[i-1]的数&#xff0c;与nums[i-1]交换&#xff0c;然后对下标区间为[i,len-1]的元素进行排序。 class Solution { public:void nextPermutation(vector<in…

[深度学习] 无人车环境准备

1. 安装过程基本遵循以下步骤 电脑端环境配置 - OriginBot智能机器人开源套件 需要注意以下两点&#xff1a; 1> 由于深度学习需要的包和镜像体积都比较大&#xff0c;所以虚拟机硬盘大小建议120GB 2> 虚拟机的网络适配器应该设置为桥接模式&#xff0c;如果使用NAT模…

im-system 第十一章

在线状态功能 需求 需求一&#xff1a;需要实时的更新好友的状态&#xff0c;有一个标识可以辨别在线和离线&#xff0c;在线和离线可以实时得到感知&#xff0c;手动修改忙碌啥的状态可以实时通知到好友 需求二&#xff1a;打开群组等&#xff0c;可以获取到这一批人的在线…

vivado 使用网表插入调试探测流程

使用网表插入调试探测流程 在 Vivado 工具中插入调试核的过程以分层方式来演示 &#xff0c; 以应对多样化的 Vivado 用户组的不同需求 &#xff1a; • 最高层是根据选定调试的一组信号线来自动创建并配置 Integrated Logic Analyzer (ILA) 核的简单向导。 • 下一层是“…

File,IO流,递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意&#xff1a; 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名&#xff0c;它是可以存在的&#xff0c;也可以不存在 绝对路径…

【二分查找】Leetcode x 的平方根

题目解析 69. x 的平方根 这道题表面是没有顺序性&#xff0c;但是我们可以发现如果使用枚举策略&#xff0c;它是包含顺序性质的&#xff0c;因此我们将枚举算法改进成二分算法 算法讲解 我们让left指针指向1&#xff0c; right指针指向x 如果当前的mid计算出来的平方 &g…

什么是商家转账到零钱

商家转账到零钱是什么&#xff1f; 通过商家转账到零钱这个功能&#xff0c;如果我们系统需要对用户支付费用&#xff0c;比如发放佣金、提成、退款之类的&#xff0c;可以直接转账到用户的微信零钱。 【商家转账到零钱】是【企业付款到零钱】的升级版&#xff0c;2022年5月1…

怀俄明探空站数据解算PWV和Tm

1. Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明探空站数据解算PWV和Tm&#xff09;&#xff0c;或者咸鱼关注&#xff1a;WZZHHH123 怀俄明探空站数据解算PWV和Tm&#xff1a; 有关 Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明多线程下载&#…

语音助手背后的魔法:一文揭秘NLP在智能助手中的应用

自然语言处理&#xff08;NLP&#xff09;正逐渐渗透到我们生活的每一个角落。在今天的大盘点中&#xff0c;我们将深入探索NLP在实际生活场景中的多样化应用&#xff0c;以及它在各个案例中所展现出的强大能力。 NLP技术如今已成为智能生活的关键驱动力&#xff0c;它让机器能…

JavaScript笔记 11

目录 01 创建元素的方式 02 BOM概述 03 window 04定时器 05 location对象的使用 07 js特效 08 offset系列相关属性 09 scroll 相关属性 10 client 相关属性 11 window 相关的事件 12 event 相关的属性 01 创建元素的方式 创建元素的三种方式: 1.innerHTML创建元素 …