点击登录按钮先检测输入框的规则检测(vue组合式)

news/2024/7/22 1:05:37/文章来源:https://blog.csdn.net/qq_53348178/article/details/139246491
<template><el-form :model="user" :rules="rules" ref="loginForm" label-width="auto" style="max-width: 600px"><el-form-item label="用户名" prop="name"><el-input v-model="user.name" id="name" placeholder="请输入用户名" /></el-form-item><el-form-item label="密码" prop="pass"><el-input v-model="user.pass" id="pass" placeholder="请输入密码" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'// 响应式的对象
const user = reactive({name: '',pass: '',
})// 设置验证规则
const rules = {name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },],pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}// 创建对表单的引用
const loginForm = ref(null)// 点击登录按钮的时候,验证是否满足rules规则
const onSubmit = () => {if (loginForm.value) {loginForm.value.validate((valid: boolean) => {if (valid) {// 表单验证通过,执行登录逻辑console.log(user)ElMessage.success('登录成功')} else {// 表单验证未通过,显示错误信息ElMessage.error('请检查输入的内容')return false}})}
}
</script>

解释

  1. 创建响应式对象

    • 使用 reactive 创建响应式的 user 对象。
    • 使用 ref 创建对表单的引用 loginForm
  2. 设置验证规则

    • 定义 rules 对象,包含用户名和密码的验证规则。
  3. 模板中使用 ref 属性

    • <el-form> 元素上使用 ref="loginForm",将其引用注册到 loginForm
  4. onSubmit 方法

    • onSubmit 方法中,通过 loginForm.value 访问表单,并调用 validate 方法验证表单。
    • validate 方法执行后,传递一个布尔值 valid 到回调函数中。如果 validtrue,则表示表单验证通过;否则,显示错误消息。
  5. 显示消息

    • 使用 ElMessage 显示成功或失败的消息。(ElMessage是EleMent Plus提供的信息组件)

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

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

相关文章

新能源汽车为乙炔炭黑行业带来了发展机遇

新能源汽车为乙炔炭黑行业带来了发展机遇 乙炔炭黑&#xff08;Acetylene carbon black&#xff09;又称乙炔黑&#xff0c;外观为黑色极细粉末&#xff0c;相对密度1.95&#xff08;氮置换法&#xff09;&#xff0c;纯度很高&#xff0c;含碳量大于99.5%&#xff0c;氢含量小…

微信小程序实现容器图片流式布局功能,配合小程序原生框架使用。

小程序实现容器图片流式布局功能&#xff0c;因为目前论坛上也有很多博主出过类似的文章&#xff0c;这里我就以一个小白角度去讲一下如何实现的吧。给作者一点点鼓励&#xff0c;先点个赞赞吧&#x1f44d;&#xff0c;蟹蟹&#xff01;&#xff01; 目标 实现下方效果图 技术…

【Sql Server】随机查询一条表记录,并重重温回顾下自定义函数的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

英语语法早操练-(上)

说起语法宝宝感觉心里苦。那么多语法注意点&#xff0c;哪个都放不到心里&#xff0c;句子表达还是错。这种情况是浪费了80%的时间做了达不到20%效果的事情。 要想写出没有语法错误的句子&#xff0c;那至少得知道词性和句子成分。 词性就是名词、动词、形容词、介词等 句子成分…

wordpress教程视频 wordpress教程网盘 wordpress教程推荐wordpress教程网

WordPress&#xff0c;作为一款强大且灵活的开源内容管理系统&#xff0c;已成为许多网站开发者与运营者的首选。其强大的功能、丰富的插件以及易于上手的特点&#xff0c;使得无论是初学者还是专业开发者都能轻松构建出个性化的网站。然而&#xff0c;对于初学者来说&#xff…

免费,Python蓝桥杯等级考试真题--第15级(含答案解析和代码)

Python蓝桥杯等级考试真题–第15级 一、 选择题 答案&#xff1a;B 答案&#xff1a;D 解析&#xff1a;集合的并集运算有两种方式&#xff0c;一种是使用“|”运算符进行操作&#xff0c;另一种是使用union()方法来实现&#xff0c;故答案为D。 答案&#xff1a;A 解析&…

XS2185一款八通道以太网供电控制器

XS2185是一款八通道以太网供电控制器。 XS2185通过侦测各通道的DET管脚输入电压 来判断是否有合格的负载/PD接入系统&#xff0c;以决定 是否开启MOS供电开关。 当通道已经处于供电状态时&#xff0c;XS2185通过侦 测SENSE管脚的输入电压&#xff0c;以判断供电是否发生 …

字符串压缩

题目链接 字符串压缩 题目描述 注意点 字符串长度在[0, 50000]范围内若“压缩”后的字符串没有变短&#xff0c;则返回原先的字符串字符串中只包含小写英文字母&#xff08;a至z&#xff09; 解答思路 模拟思路&#xff0c;使用pre存储当前位置的前一个字符&#xff0c;使…

使用BigDecimal定义的实体类字段返回给前台的是字符串类型,如何返回数字类型

目录 前言&#xff1a; 问题现象&#xff1a; 解决方法&#xff1a; 效果&#xff1a; 前言&#xff1a; 做项目的时候数据字段通常定义为bigdecimal类型&#xff0c;方便进行运算&#xff0c;但是发现接口调用后返回给前台的是字符串&#xff0c;这篇博文讲的是如何将定义…

Creating parameterized straight waveguide in INTERCONNECT 创建参数化的器件

Creating parameterized straight waveguide in INTERCONNECT 创建参数化的器件 引言正文引言 之前,我们在 INTERCONNECT 中使用库中器件制作一个损耗为 3 dB /m 的直波导 一文中介绍了如何使用 Library 中的直波导来进行仿真,这里我们简单介绍如何在 INTERCONNECT 中创建属…

ArcgisPro3.1.5安装手册

ArcgisPro3.1.5安装手册 一、目录介绍: 二、安装教程&#xff1a; (1)安装顺序&#xff1a;最先安装运行环境&#xff08;runtime6.0.5&#xff09;,接着安装install里面的文件&#xff0c;最后复制path里面的文件替换到软件bin文件夹下即可。 (2)具体安装步骤&#xff…

用这8种方法在海外媒体推广发稿平台上获得突破-华媒舍

在今天的数字时代&#xff0c;海外媒体推广发稿平台已经成为了许多机构和个人宣传和推广的有效途径。如何在这些平台上获得突破并吸引更多的关注是一个关键问题。本文将介绍8种方法&#xff0c;帮助您在海外媒体推广发稿平台上实现突破。 1. 确定目标受众 在开始使用海外媒体推…

疑惑点:动作监听时this的含义:可以理解为接口的多态

全部代码&#xff1a; package test;import javax.swing.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Random;public class test3 extends JFrame implements ActionListener {JButton jb1 new JButton("你点我啊&am…

鸿蒙ArkUI-X跨平台开发:【bility开发说明(iOS端)】

通过Stage模型开发iOS端应用指南 简介 本文介绍将ArkUI框架扩展到iOS平台所需要的必要类及其使用说明&#xff0c;开发者基于OpenHarmony&#xff0c;可复用大部分的应用代码&#xff08;生命周期等&#xff09;并可以部署到iOS平台&#xff0c;降低跨平台应用开发成本。 Ar…

c++——模板初始识

1.函数模板 我们经常用到Swap函数交换两个值。由于需要交换的数据的类型不同&#xff0c;我们就需要写不同参数类型的同名函数&#xff0c;也就是函数重载&#xff1a; 然而这三个函数的逻辑是一样的&#xff0c;写这么多有些多此一举&#xff0c;通过函数模版可以写一个通用…

SAP后续借记、后续贷记、贷方凭证的应用介绍

SAP-MM模块中发票校验MIRO,对于做采购或财务相关的用户都应该非常熟悉,可能每天都需要进行这业务操作处理,但是在发票校验的系统界面中,有三个使用不是很频繁的功能(如下图红色框)。 对于这三业务功能曾听有些用户抱怨SAP怎么那么麻烦啊,不就是补偿或扣供应商的钱嘛,我…

配置环境变量

配置环境变量$(xxxx)&#xff0c;代表宏 32位操作系统&#xff0c;请自觉将文中路径中所有的x64换成x86。 %符号表示引用系统环境变量或用户自定义的环境变量 如果你想将某个文件夹添加到Visual Studio的路径中&#xff0c;你可以在环境变量中添加%FolderName%&#xff0c;其…

经验分享:JMeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就…

17- PHP 开发-个人博客项目TP 框架路由访问安全写法历史漏 洞

常见的php框架&#xff1a;laravel和thinkphp和yii 这里以thinkphp为例 thinkphp目录访问设置 这里只找到了这个3.多的源代码&#xff0c;没找点5.的&#xff0c;凑合一下 链接&#xff1a;GitHub - top-think/thinkphp: ThinkPHP3.2 ——基于PHP5的简单快速的面向对象的PHP…

RPC 框架

RPC 全称 Remote Procedure Call——远程过程调用。 RPC技术简单说就是为了解决远程调用服务的一种技术&#xff0c;使得调用者像调用本地服务一样方便透明。RPC是一种通过网络从远程计算机程序上请求服务&#xff0c;不需要了解底层网络技术的协议。 集群和分布式 集群&…