vue3前端开发-小兔鲜项目-form表单的统一校验

news2024/9/25 16:36:29

vue3前端开发-小兔鲜项目-form表单的统一校验!实际上,为了安全起见,用户输入的表单信息,要满足我们的业务需求,参数类型等种种标准之后,才会允许用户向服务器发送登录请求。为此,有必要进行一次form表单的全局校验。也为后面的是否发送登录业务请求作为判定依据。


1:使用钩子函数,ref.获取到form的表单对象。

之前我分享的内容文章里介绍过这个ref是一个钩子函数,用它,可以获取到标签对象的内容。

2:给登录按钮绑定一个函数:doLogin

内容比较简单,看代码就懂了。


//form实例对象的统一校验,
const formRef = ref(null)
const doLogin = ()=>{
    //调用实例方法
    formRef.value.validate((valid)=>{
        console.log(valid)
    })
}

有了这个基础数据,我们后面就可以写登录发送请求的判定逻辑了。

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

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

相关文章

set_clock_groups -physically_exclusive 和-asynchronous是否有必要同时设置

引言 vc-spyglass sdc检查时遇到的问题 正如vc spyglass sdc check提示Error: 当两个时钟设置成物理互斥或逻辑互斥时,需要另外加上这两个时钟是异步设置的约束。 个人经历: 由于本人经验尚浅,之前遇到的项目,个人理解是设置了物…

W30-python03-pytest+selenium+allure访问百度网站实例

此篇文章为总结性,将pystest、selenium、allure结合起来 功能如下,web自动化,输入baidu网站,搜索“雷军”、打开网页中第一条内容 tools.webkeys 相关文件见附件。 pytestsel.py如下: import time import re impor…

全链路追踪 性能监控,GO 应用可观测全面升级

作者:古琦 01 介绍 随着 Kubernetes 和容器化技术的普及,Go 语言不仅在云原生基础组件领域广泛应用,也在各类业务场景中占据了重要地位。如今,越来越多的新兴业务选择 Golang 作为首选编程语言。得益于丰富的 RPC 框架&#xff…

在 Windows 搭建 flink 运行环境并模拟流数据处理

一、引入 在大数据场景中,开发者追求高效与灵活,Linux 系统以其稳定性成为众多组件的首选,但在资源有限的情况下,在本机搭建一个 Linux 虚拟机集群却显得过于笨重,启动、运行占资源,需要配置网络,无法和windows共享资源,尤其是对只有 8GB 内存的 Windows 系统用户来说…

C++内存管理(候捷)第五讲 笔记

GNU C对allocators的描述 new_allocator 和malloc_allocator,它们都没有特别的动作,无非底部调用operator new和malloc。它们没有用内存池 区别:::operator new是可重载的 智能型的allocator,使用内存池,分一大块然后…

lua 游戏架构 之 游戏 AI (四)ai_autofight_find_target

定义一个名为 ai_autofight_find_target 的类,继承自 ai_base 类。 lua 游戏架构 之 游戏 AI (一)ai_base-CSDN博客文章浏览阅读237次。定义了一套接口和属性,可以基于这个基础类派生出具有特定行为的AI组件。例如,可…

【Python系列】isin用法

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

简单使用nginx

打开下载的nginx文件夹下的。。具体地址 打开并编辑nginx.conf文件 server {listen 8089;//访问端口号server_name localhost;//访问地址#charset koi8-r;#access_log logs/host.access.log main;location / {root D:/development/dist/;//dist包地址index index.h…

无人机之降落操作及紧急情况处理

一、无人机降落操作 1、选择降落地点 a.提前选择一个平坦且没有障碍物的降落点; b.确认降落点周围没有行人或障碍物,保证降落的安全性。 2、降低飞行高度 a.缓慢降低飞行高度,尽量保持匀速下降,防止因下降过快导致无人机受损…

用户管理与高级SQL语句(数据库管理与高可用)

1.表(Table ) 数据库中的表与我们日常生活中使用的表格类似,它也是由行(Row) 和列(Column)组成的。列由同类的信息组成,每列又称为一个字段,每列的标题称为字段名。行包…

NeRF:从二维图像到三维重建【初识!原理通俗讲解】

NeRF:从二维图像到三维重建 反渲染(Inverse Rendering)可以理解为成像渲染的反过程,是指从一组二维图像重建三维场景的过程,这在计算机视觉和图形学中具有重要意义。NeRF(Neural Radiance Fields&#xff…

Profinet转ModbusTCP网关模块的配置与应用详解

Profinet转ModbusTCP网关模块(XD-ETHPN20)是一种常见的工业通信设备,广泛应用于现代工业自动化系统中。通过使用Profinet转Modbus TCP网关模块(XD-ETHPN20)将Profinet协议转换成Modbus TCP协议,实现了不同网…

【Web】LitCTF 2024 题解(全)

目录 浏览器也能套娃? 一个....池子? 高亮主题(划掉)背景查看器 百万美元的诱惑 SAS - Serializing Authentication exx 浏览器也能套娃? 随便试一试,一眼ssrf file:///flag直接读本地文件 一个....池子? {…

昇思25天学习打卡营第23天|LSTM+CRF序列标注

Mindspore框架CRF条件随机场概率图模型实现文本序列命名实体标注|(一)序列标注与条件随机场的关系 Mindspore框架CRF条件随机场概率图模型实现文本序列命名实体标注|(二)CRF模型构建 Mindspore框架CRF条件随机场概率图模型实现文本…

IEC104转MQTT网关快速实现了IEC104到MQTT的转换和数据交互

随着智能电网技术的不断进步,IEC 104(IEC 60870-5-104)协议作为电力系统中重要的远动通信标准,正逐步融入更广泛的物联网生态系统中。亚马逊AWS(Amazon Web Services),作为全球领先的云计算服务…

神经网络与注意力机制的权重学习对比:公式探索

神经网络与注意力机制的权重学习对比:公式探索 注意力机制与神经网络权重学习的核心差异 在探讨神经网络与注意力机制的权重学习时,一个核心差异在于它们如何处理输入数据的权重。神经网络通常通过反向传播算法学习权重,而注意力机制则通过学…

python通过omniORBpy调用CORBA

omniORB参考地址: omniORB omniORB - Browse Files at SourceForge.net omniORB - Browse /omniORBpy/omniORBpy-4.3.0 at SourceForge.net Windows 普通使用好像不需要安装omniorb。就对接北向接口业务需要使用python3.10的windows包,但目前好像没有…

vue接入google map自定义marker教程

需求背景 由于客户需求,原来系统接入的高德地图,他们不接受,需要换成google地图。然后就各种百度,各种Google,却不能实现。----无语,就连google地图官方的api也是一坨S-H-I。所以才出现这篇文章。 google地…

SpringBoot整合elasticsearch-java

一、依赖 系统使用的是ElasticSearch8.2.0 <dependency><groupId>co.elastic.clients</groupId><artifactId>elasticsearch-java</artifactId><version>8.1.0</version> </dependency> 二、配置 1、yml文件配置 elastics…

移动式气象站:便携科技的天气守望者

在科技日新月异的今天&#xff0c;我们身边的许多设备都在向着更加智能化、便携化的方向发展。而在气象观测领域&#xff0c;移动式气象站的出现&#xff0c;不仅改变了传统气象观测的固有模式&#xff0c;更以其灵活性和实时性&#xff0c;在气象监测、灾害预警等领域发挥着越…