vue3——登录校验

页面

首先需要在表单配置model、ref、rules,el-form-item中放prop

		<el-form :model="form" label-width="0" ref="formRef" :rules="rules"><el-form-item label="" prop="username"><el-input v-model="form.username" :prefix-icon="User" /></el-form-item><el-form-item label="" prop="password"><el-inputv-model="form.password":prefix-icon="Lock"show-password/></el-form-item><el-form-item label=""><el-buttonclass="loginBtn"type="primary":loading="btnLoading"@click="loginClick">登录</el-button></el-form-item></el-form>

script

let form = reactive({username: 'admin',password: '111111',
})
const formRef = ref()
const btnLoading = ref(false)
const rules = {username: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 5, message: '账号不能少于五位', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, message: '密码不能少于五位', trigger: 'blur' },],
}const loginClick = () => {formRef.value.validate(async (valid: any, fields: any) => {if (valid) {btnLoading.value = truetry {await userStore.userLogin(form) // 接口btnLoading.value = falseElNotification({title: `${tool.getTimeType()}`,message: '登录成功',})await router.push('/')} catch (error) {btnLoading.value = falseElNotification({title: '登录失败', message: (error as Error).message,})}} else {btnLoading.value = falseconsole.log('error submit!', fields)}})
}

看着简单,少一点休想校验 (ˉ▽ˉ;)…

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

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

相关文章

HTML元素的操作

获取HTML的值 获取文本内容 1.先获取元素的内容 2.使用innerText方法 let btn document.getElementById("btn");//获取文本内容console.log(btn.innerText);设置文本内容 btn.innerText "测试数据"; let box document.getElementById("box"…

Web后端开发:登录认证案例

登录功能 需求分析 在登录界面中&#xff0c;输入用户的用户名以及密码&#xff0c;然后点击 “登录” &#xff0c;服务端判断用户输入的用户名和密码是否都正确。如果正确&#xff0c;则返回成功结果&#xff0c;前端跳转至系统首页面&#xff1b;否则报错&#xff0c;停留在…

从零开始手写mmo游戏从框架到爆炸(十)— 集成springboot-jpa与用户表

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 集成springboot-jpa&#xff0c;不用mybatis框架一个是方便对接不同的数据源。第二个目前规划的游戏内容可能对数据库的依赖不是很大&#xff0c;jpa应该肯定能满足要求了…

c++学习:iostream输入输出+错误流+标准日志流

C 中的输入和输出&#xff08;I/O&#xff09;主要是通过标准库中的输入输出流来实现的。最常用的是 iostream 库&#xff0c;它 提供了用于输入和输出的基本流类&#xff0c;包括 cin 、 cout 、 cerr 和 clog 头文件 #include <iostream> 标准输出流 ( cout ) cout…

Unity类银河恶魔城学习记录4-1,4-2 Attack Logic,Collider‘s collision excepetion源代码 P54 p55

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Entity.cs using System.Collections; using System.Collections.Generic; u…

深入探索 Express.js 的高级特性

引言 Express.js 是一个基于 Node.js 平台的 Web 开发框架&#xff0c;旨在提供一种简单、易于使用的方式来创建 Web 应用程序。由于其灵活性和可扩展性&#xff0c;它已经成为了 Node.js 社区最受欢迎的框架之一。在本文中&#xff0c;我们将重点介绍 Express.js 的高级特性&…

Flink从入门到实践(一):Flink入门、Flink部署

文章目录 系列文章索引一、快速上手1、导包2、求词频demo&#xff08;1&#xff09;要读取的数据&#xff08;2&#xff09;demo1&#xff1a;批处理&#xff08;离线处理&#xff09;&#xff08;3&#xff09;demo2 - lambda优化&#xff1a;批处理&#xff08;离线处理&…

容器基础知识:容器和虚拟化的区别

虚拟化与容器化对比 容器化和虚拟化都是用于优化资源利用率并实现高效应用程序部署的技术。然而&#xff0c;它们在方法和关键特征上存在差异&#xff1a; 虚拟化: 可以理解为创建虚拟机 (VM)。虚拟机模拟一台拥有自己硬件&#xff08;CPU、内存、存储&#xff09;和操作系统…

【Python基础】案例分析:电影分析

电影分析 项目背景&#xff1a; 数据集介绍&#xff1a;movie_lens数据集是一个电影信息&#xff0c;电影评分的数据集&#xff0c;可以用来做推荐系统的数据集需求&#xff1a;对电影发展&#xff0c;类型&#xff0c;评分等做统计分析。目标&#xff1a;巩固pandas相关知识…

nohup基本使用

在Linux终端命令中经常要使用到在关闭终端界面的情况下需要后台挂起执行的进程&#xff0c;也就是关闭终端后台任务的进程还是会常驻&#xff0c;下面就简单介绍下 nohup 命令 1. nohup nohup 英文全称 no hang up&#xff08;不挂起&#xff09;&#xff0c;默认情况下&#x…

Layui 表格组件 头部工具栏 筛选列 加入全选和全不选的功能

Layui 表格组件 头部工具栏 筛选列 加入全选和全不选的功能 问题 前端使用Layui表格组件展示后台数据&#xff0c;因数据中涉及字段较多&#xff0c;因此加入了组件中固有的控制表格列隐藏显示的功能。奈何客户希望再此基础上&#xff0c;加入“全选”和“全不选”的功能&…

【动态规划】【前缀和】【C++算法】LCP 57. 打地鼠

作者推荐 视频算法专题 本文涉及知识点 动态规划汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LCP 57. 打地鼠 勇者面前有一个大小为3*3 的打地鼠游戏机&#xff0c;地鼠将随机出现在各个位置&#xff0c;moles[i] [t,x,y] 表…

Adb offline疑难杂症解决方案大全记录

无线/有线Adb offline依次尝试下面步骤&#xff1a; adb kill-server && adb start-server adb reconnect offline 多次 adb tcpip 5555 后重试 检查有线端口5037、无线5555占用&#xff0c;排除改名的adb或其他应用占用 换USB线和USB口拔插、确保同一WiFi下&#xff0…

Stable Diffusion 模型下载:Samaritan 3d Cartoon SDXL(撒玛利亚人 3d 卡通 SDXL)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 由“PromptSharingSamaritan”创作的撒玛利亚人 3d 卡通类型的大模型&#xff0c;该模型的基础模型为 SDXL 1.0。 条目内容类型大模型基础模型SDXL 1.0来源CIVITA…

2024.2.7

#include<stdio.h> #include<string.h> #include<stdlib.h> typedef char datatype;typedef struct node {//数据域datatype data;//指针域&#xff1a;左struct node *lchild;//指针域&#xff1a;右struct node *rchild; }*btree;//创建节点 btree creat_n…

嵌入式中轻松识别STM32单片机是否跑飞方法

单片机项目偶尔经常出现异常&#xff0c;不知道是程序跑飞了&#xff0c;还是进入某个死循环了&#xff1f; 因为发生概率比较低&#xff0c;也没有规律&#xff0c;所以没办法在线调试查找问题。 结合这个问题&#xff0c;给大家分享一下用ST-LINK Utility识别单片机程序是否…

python-可视化篇-pyecharts库-气候堆叠图

准备 代码 # codingutf-8 # 代码文件&#xff1a;code/chapter10/10.3.py # 3D柱状图import randomfrom pyecharts import options as opts from pyecharts.charts import Bar3D# 生成测试数据 data [[x, y, random.randint(10, 40)] for y in range(7) for x in range(24)]…

[算法前沿]--060-天工Skywork-13B 开源模型

1.技术细节 》 数据处理、 数据配比、模型优化、评估方案 2.数据集 wudao-DataSkywork-150B:https://hf.co/Skywork非盈利性机构构建的CommonCrawl数据集是一个海量的、非结构化的、多语言的网页数据集。它包含了超过 8 年的网络爬虫数据集,包含原始网页数据(WARC)、元数…

Git中为常用指令配置别名

目录 1 前言 2 具体操作 2.1 创建.bashrc文件 2.2 添加指令 2.3 使其生效 2.4 测试 1 前言 在Git中有一些常用指令比较长&#xff0c;当我们直接输入&#xff0c;不仅费时费力&#xff0c;还容易出错。这时候&#xff0c;如果能给其取个简短的别名&#xff0c;那么事情就…

电力负荷预测 | 电力系统负荷预测模型(Python线性回归、随机森林、支持向量机、BP神经网络、GRU、LSTM)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 电力系统负荷预测模型(Python线性回归、随机森林、支持向量机、BP神经网络、GRU、LSTM) 所谓预测,就是指通过对事物进行分析及研究,并运用合理的方法探索事物的发展变化规律,对其未来发展做出预先估计和判断。…