【Vue3】通用表单校验的两种方式
创始人
2025-05-29 19:38:47
0次

文章目录

  • 1. 表单校验需求
    • 1.1 动作触发校验
    • 1.2 点击按钮校验
  • 2. 实现
    • 2.1 实现单个输入框校验
    • 2.2 点击按钮时整体校验
  • 3. 完整代码

1. 表单校验需求

1.1 动作触发校验

最常用的就是光标离开输入框时进行单个输入框的校验，如下：

在这里插入图片描述

1.2 点击按钮校验

还有一种就是点击按钮时进行整个表单的校验，比如登录时，检查表单所有输入内容是否合法。当不合法时，显示Toast提示信息。

在这里插入图片描述

2. 实现

使用的是Vant UI，其他的框架如Element-plus也是一个道理：

2.1 实现单个输入框校验

需要给输入框添：

  • 加一个rules，里面内容是一个规则列表，主要有两种，一种是通过正则校验，另一种是通过自定义验证器校验
  • 添加name属性，值为对应的校验对象的名字

rules说明：

  • pattern：通过正则表达式进行校验，正则无法匹配表示校验不通过
  • message：错误提示文案，可以设置为一个函数来返回动态的文案内容
  • validator：通过函数进行校验，可以返回一个 Promise 来进行异步校验
  • trigger：设置本项规则的触发时机，优先级高于 Form 组件设置的 validate-trigger 属性，可选值为 onChange、onBlur、onSubmit。默认是onBlur，即光标离开时触发

2.2 点击按钮时整体校验

给Form标签添加ref，在script中定义该对象，给按钮添加@click，点击时触发函数

在函数中，使用ref中的对象.value?validate()进行校验

validate()中无参数默认校验整个表单

登录

3. 完整代码
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：tauri+vite+vue3开发环境下创建、启动运行和打包发布

下一篇：C++之面向对象（上）

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统（六）：学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤： 在Student.cpp的...
JAVA多线程知识整理 Java多线程基础 线程的创建和启动 继承Thread类来创建并启动 自定义Thread类的子类&#...
【洛谷 P1090】[NOIP... [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G ...
国民技术LPUART介绍 低功耗通用异步接收器（LPUART） 简介 低功耗通用异步收发器...
城乡供水一体化平台-助力乡村振... 城乡供水一体化管理系统建设方案 城乡供水一体化管理系统是运用云计算、大数据等信息化手段࿰...
程序的循环结构和random库...   第三个参数就是步长     引入文件时记得指明字符格式，否则读入不了 ...
中国版ChatGPT在哪些方面... 目录 一、中国巨大的市场需求 二、中国企业加速创新 三、中国的人工智能发展 四、企业愿景的推进 五、...
报名开启 | 共赴一场 Flu... 2023 年 1 月 25 日，Flutter Forward 大会在肯尼亚首都内罗毕...
汇编00-MASM 和 Vis... Qt源码解析 索引 汇编逆向--- MASM 和 Visual Studio入门 前提知识ÿ...
【简陋Web应用3】实现人脸比... 文章目录🍉 前情提要🌷 效果演示🥝 实现过程1. u...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...
windows安装JDK步骤 一、 下载JDK安装包 下载地址：https://www.oracle.com/jav...
分治法实现合并排序(归并排序)... 🎊【数据结构与算法】专题正在持续更新中，各种数据结构的创建原理与运用✨...
在linux上安装配置node... 目录前言1，关于nodejs2，配置环境变量3，总结 前言...
Linux学习之端口、网络协议... 端口：设备与外界通讯交流的出口 网络协议： 　　网络协议是指计算机通信网...
Linux内核进程管理并发同步... 并发同步并发 是指在某一时间段内能够处理多个任务的能力，而 并行 是指同一时间能够处理...
opencv学习-HOG LO... 目录1. HOG(Histogram of Oriented Gradients,方向梯度直方图)1...
EEG微状态的功能意义 导读大脑的瞬时全局功能状态反映在其电场结构上。聚类分析方法一致地提取了四种头表面脑电场结构ÿ...
【Unity 手写PBR】Bu... 写在前面 前期积累： GAMES101作业7提高-实现微表面模型你需要了解的知识 【技...