第68讲表单验证实现

news2024/10/7 20:31:05
表单验证实现

Form 组件允许你验证用户的输入是否符合规范,来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能,只需为 rules 属性传入约定的验证规则,并将 form-Itemprop 属性设置为需要验证的特殊键值即可。

在这里插入图片描述

const rules=ref({
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})

const formRef=ref(null);

const handleLogin=()=>{
  formRef.value.validate(async (valid)=>{
    if(valid){
      console.log("验证成功")
    }
  })
}

在这里插入图片描述

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

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

相关文章

掌握Pandas数据筛选方法与高级应用全解析【第70篇—python:数据筛选】

文章目录 掌握Pandas:数据筛选方法与高级应用全解析1. between方法2. isin方法3. loc方法4. iloc方法5. 查询复杂条件的结合应用6. 避免inplace参数7. 利用Lambda函数进行自定义筛选8. 处理缺失值9. 多条件排序10. 数据统计与分组 总结: 掌握Pandas&…

NLP_引入注意力机制

文章目录 点积注意力创建两个张量x1和x2计算张量点积, 得到原始权重对原始权重进行归一化求出注意力分布的加权和 缩放点积注意力编码器-解码器注意力定义Attention类重构Decoder类重构Seq2Seq类可视化注意力权重 注意力机制中的 Q、K、V自注意力多头自注意力注意力…

Excel——重复项处理

一、高亮重复项 选择需要高亮重复项的列/单元格 选择【数据】——【重复项】—— 【高亮重复项】 如果高亮重复项的数据较长,例如:身份证号、银行卡,可以勾选下列选项,能够精准检查重复项。 结果如下所示 如果想要清除高亮的重复…

Java并发基础:ArrayBlockingQueue全面解析!

内容摘要 ArrayBlockingQueue类是一个高效、线程安全的队列实现,它基于数组,提供了快速的元素访问,并支持多线程间的同步操作,作为有界队列,它能有效防止内存溢出,并通过阻塞机制平衡生产者和消费者的速度…

【Qt 学习之路】在 Qt 使用 ZeroMQ

文章目录 1、概述2、ZeroMQ介绍2.1、ZeroMQ 是什么2.2、ZeroMQ 主线程与I/O线程2.3、ZeroMQ 4种模型2.4、ZeroMQ 相关地址 3、Qt 使用 ZeroMQ3.1、下载 ZeroMQ3.2、添加 ZeroMQ 库3.3、使用 ZeroMQ3.4、相关 ZeroMQ 案例 1、概述 今天是大年初一,先给大家拜个年&am…

c++2024寒假J312实战班2.4

长话短说,简明扼要一直是我的行事风格,如有不精准的地方,就到网上去搜,好吧。 今天分享我们做的四道题,都挺简单的,就是难思考。 题目列表: 1.Maximum Subarray Sum 2.分解因数 3.公交换乘 4.…

05-Java原型模式 ( Prototype Pattern )

原型模式 摘要实现范例 原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能原型模式实现了一个原型接口,该接口用于创建当前对象的克隆当直接创建对象的代价比较大时,则采用这种模式 例如&#xff0c…

用bootstrap结合jQuery实现简单的模态对话框

嗨害嗨,我又来了奥。今天呢,给大家分享一个工作中常用到的插件——模态对话框的用法。想必大家在工作中也遇到很多页面,需要用模态对话框进行交互的吧,现在呢,就让我们一起来了解一下它的使用吧。 首先,我…

《动手学深度学习(PyTorch版)》笔记8.3

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

【RabbitMQ(二)】:Exchange 详解 | Message Convert 消息转换器

文章目录 03. 使用 Java 代码去操控 RabbitMQ3.1 快速入门3.1.1 创建父子项目3.1.2 编写代码 3.2 Work 模型3.3 RabbitMQ 中的三类交换机3.3.1 Fanout 扇出交换机3.3.2 Direct 交换机3.3.3 Topic 交换机 3.4 声明队列交换机3.4.1 方式一:书写 Config 类3.4.2 方式二…

MySQL篇之回表查询

一、聚集索引 将数据存储与索引放到了一块,索引结构的叶子节点保存了行数据。特点:必须有,而且只有一个。 聚集索引选取规则: 1. 如果存在主键,主键索引就是聚集索引。 2. 如果不存在主键,将使用第一个唯一(UNIQUE&am…

算法学习——LeetCode力扣栈与队列篇2

算法学习——LeetCode力扣栈与队列篇2 150. 逆波兰表达式求值 150. 逆波兰表达式求值 - 力扣(LeetCode) 描述 给你一个字符串数组 tokens ,表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。…

ClickHouse--01--简介

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1. ClickHouse 简介官网: [https://clickhouse.com/docs/zh](https://clickhouse.com/docs/zh) 1.1 大数据处理场景1.2 什么是 ClickHouse1.3 OLAP 场景…

Tuxera NTFS2024永久免费版磁盘读写软件

Tuxera NTFS 2024由Tuxera公司开发,是一款专为Mac系统设计的NTFS磁盘读写软件。以下是这款软件的具体优势: 全面的读写功能:Tuxera NTFS 2024允许Mac用户全面读写NTFS格式的硬盘、U盘、SD卡等存储设备。这意味着用户可以在Mac上自由读取和写…

Android Graphics 图像显示系统 - 开篇

“ 随着学习的不断深入和工作经验的积累,欲将之前在博客中整理的Android Graphics知识做进一步整理,并纠正一些理解上的错误,故开设Graphics主题系列文章 ” 序言 由于工作需要,也源于个人兴趣,终于下决心花时间整理一…

gem5学习(19):gem5内存系统——The gem5 Memory System

目录 一、Model Hierarchy 二、CPU 三、Data Cache Object 四、Tags & Data Block 五、MSHR and Write Buffer Queues 六、Memory Access Ordering 七、Coherent Bus Object 八、Simple Memory Object 九、Message Flow 1、Memory Access Ordering(re…

[每周一更]-(第86期):PostgreSQL入门学习和对比MySQL

入门学习PostgreSQL可以遵循以下步骤: 安装 PostgreSQL: 首先,你需要在你的计算机上安装 PostgreSQL。你可以从 PostgreSQL 官方网站 下载适合你操作系统的安装包,并按照官方文档的指导进行安装。 学习 SQL: PostgreS…

【JS逆向三】逆向某某网站的sign参数,并模拟生成仅供学习

逆向日期:2024.02.06 使用工具:Node.js 类型:webpack 文章全程已做去敏处理!!! 【需要做的可联系我】 可使用AES进行解密处理(直接解密即可):AES加解密工具 1、打开某某…

深入理解Go的垃圾回收机制

导语 如果你是一位Golang的开发者,你一定对于语言特性和详细结构有所了解。但是,你是否曾经停下来深入研究过Golang背后复杂而强大的垃圾回收(GC)机制?在这篇文章中,我们将具体深入探讨Golang垃圾回收机制…

fast.ai 深度学习笔记(三)

深度学习 2:第 1 部分第 6 课 原文:medium.com/hiromi_suenaga/deep-learning-2-part-1-lesson-6-de70d626976c 译者:飞龙 协议:CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它,这…