当前位置: 首页 > news >正文

【前端】vue3 接入antdv表单校验

1/🍕背景

1、表单校验是非常常见的需求,能够有效的拦截大部分的错误数据,提升效率。
2、快速的给使用者提示和反馈,用户体验感非常好。
3、成熟的表单校验框架,开发效率高,bug少。

最近使用的是vue3+antdv的架子,仔细探究一下表单校验的问题,总结一下。

框架可能不同,主要看核心问题,如果有帮助,欢迎一键三连。【春花秋时知多少】

2/🥗规则配置

首先查看官网的 模版,

构建了一个表单,大概意思是直接写rules就可以使用了,我的目标是这个字段需要长度限制,

第一个常见错误,rules的位置错误,直接在item里面加了rule(或者rules ),都是无效的,需要加在表单上。

注:antd文档是在表单项里面配置rules的,一般会对比两个组件的文档,有时候真的有用!!!

 	...<a-form-item label="Activity name" name="name" :rules="[{ required: true, message: 'Please input your username!' }]"><a-input v-model:value="formState.name" /></a-form-item>
</a-form>

上面的写法就是无效的,必须要放在 a-form,也就是表格上面,不能放在表单项上面。

    <a-form...:rules="rules"@finish="onFinish"@finishFailed="onFinishFailed">...</a-form>

对应rules绑定位置,使用:rules 绑定对象

那它如何区分是哪个字段的校验规则呢?

rules是一个对象,对象的属性名对应字段的name名即可(类似map的key),通过key去找规则。

而且对象的值是一个对象数组,可以创建多个规则叠加,不用所有规则写到一个对象里面。

const rules = {name: [{required: true,message: "ass",},],passwd: [{min: 5,message: "need",},],
};

3/🍨 规则编写

这个官方只给的例子,不是很清楚,但是它说本质上是使用的 async-validator

然后看了下,大概有这几个点需要注意,基本就能完成大部分的规则校验。

1、类型判断,比如校验值必须是数字,用这个就可以快速限定类型。支持的类型如下

string
number
boolean
method
regexp RegExp
integer
float
array
object
enum
date
url
hex
email
any

还支持正则,对于对象和数组,还可以进一步处理,非常方便。

对象可以使用 fields 来限定属性

const descriptor = {address: {type: 'object',required: true,options: { first: true },fields: {street: { type: 'string', required: true },city: { type: 'string', required: true },zip: { type: 'string', required: true, len: 8, message: 'invalid zip' },},},
};

数组 可以使用下标位置来限定

const descriptor = {roles: {type: 'array',required: true,len: 3,fields: {0: { type: 'string', required: true },1: { type: 'string', required: true },2: { type: 'string', required: true },},},
};

数组还可以使用统一的defaultField 来处理每一个

const descriptor = {urls: {type: 'array',required: true,defaultField: { type: 'url' },},
};

2、trigger 指定校验时机

文档上只支持 change(改变) 和 blur(聚焦),就是输入的时候,和失去焦点的时候,比如提交的时候,根据需求选择即可。

经测试,默认不处理 是 trigger: 'change',输入校验

可以使用数组,来同时满足多个 trigger: ['blur', 'change'],

单个 trigger: 'blur'

4/🌴 校验逻辑错误,值为undifined.

本来都写好了,发现出现的逻辑不对,最简单的例子都实现不了。

const rules = {name: [{required: true,message: "must need",},{min: 5,message: "least 5.",},],
};

针对同一个字段,两条规则:
第一个规则:必填,如果没填就提示第一个,
第二个规则: 至少5位。

结果只有第一个提示,而且一直提示,不会消失。

我甚至是怀疑是只有配置了required: true, 才能正常使用,显然不是,这个表示的是不能为空。即使算输入合法的也会提示,根本没有校验逻辑。

后面查了半天,还需要配置一个 :model="formState",即需要传递表单对象过去,校验表单项的值从这里面取,应该是而不能直接获取表单项的值。这个 :model 就是需要把表单对象传递过去。

  <a-form:model="formState":name="state.formConfig.name":label-col="{ span: 6 }":wrapper-col="{ span: 8 }":autocomplete="state.formConfig.autocomplete":rules="rules"@finish="onFinish"@finishFailed="onFinishFailed"><a-input v-model:value="item.value" />{{ item.value }}</a-form-item> --><a-form-item label="Activity name" name="name"><a-input v-model:value="formState.name" /></a-form-item></a-form>
...
const formState = reactive({name: "",region: undefined,date1: undefined,delivery: false,type: [],resource: "",desc: "",
});const rules = {name: [{required: true,message: "must need",},{min: 5,message: "least 5.",// trigger: ["change", "blur"],// validator: checkeNickName,},],
};

这个问题困扰了我半天,写出来,希望能帮到大家。

自定义校验器

这个很简单,直接写一个自定义校验方法就行了。

然后校验规则里面指定自己的校验方法, validator: checkeNickName, 即可

(注:就是用这个方法,然后debug出上面的mode未设置的问题,自定义方法里面的value一直是undifine,-。-)

const checkeNickName = function (rule, value, callback) {console.log(rule, value, callback);if (value) {if (value.length > 5) {return Promise.reject("用户昵称长度应小于5个字符");} else {return Promise.resolve();}} else {return Promise.reject("请输入用户昵称");}
};
const rules = {name: [{required: true,message: "must need",},{min: 5,message: "least 5.",validator: checkeNickName,},],
};

拿到了值,自己怎么处理就好写了,成功 返回 return Promise.resolve();

失败返回 return Promise.reject("用户昵称长度应小于5个字符");,里面的参数是提示信息,可以自定义

🚓总结

1、规则配置位置要正确,大部分问题都是配置错误,尽量搞懂每个配置的作用
2、本质上是对async-validator 的封装,可以从源头查询问题
3、antdv表单校验需要传递表单对象过去,这个是特有的规定,按照要求编写。
4、自定义校验,只需要写自定义校验方法 function (rule, value, callback),然后在rules的对象里面 使用 validator: checkeNickName, 调用这个方法即可

相关文章:

【前端】vue3 接入antdv表单校验

1/&#x1f355;背景 1、表单校验是非常常见的需求&#xff0c;能够有效的拦截大部分的错误数据&#xff0c;提升效率。 2、快速的给使用者提示和反馈&#xff0c;用户体验感非常好。 3、成熟的表单校验框架&#xff0c;开发效率高&#xff0c;bug少。 最近使用的是vue3antdv的…...

CY3-COOH在蛋白质定位的特点1251915-29-3星戈瑞

​欢迎来到星戈瑞荧光stargraydye&#xff01;小编带您盘点&#xff1a; CY3-COOH是一种橙红色荧光标记试剂&#xff0c;可以用于蛋白质定位研究。**以下是CY3-COOH在蛋白质定位的特点和应用&#xff1a; 细胞定位&#xff1a;**将CY3-COOH标记到特定蛋白质上&#xff0c;可以…...

数据采集:selenium 获取某网站CDN 商家排名信息

写在前面 工作中遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对大…...

5.从头跑一个pipeline

1.安装torch pip install torchvision torch PyTorch的torchvision.models模块中自带的很多预定义模型。torchvision 是PyTorch的一个官方库&#xff0c;专门用于处理计算机视觉任务。在这个库中&#xff0c;可以找到许多常用的卷积神经网络模型&#xff0c;包括ResNet、VGG、…...

leetcode原题: 堆箱子(动态规划实现)

题目&#xff1a; 给你一堆n个箱子&#xff0c;箱子宽 wi、深 di、高 hi。箱子不能翻转&#xff0c;将箱子堆起来时&#xff0c;下面箱子的宽度、高度和深度必须大于上面的箱子。实现一种方法&#xff0c;搭出最高的一堆箱子。箱堆的高度为每个箱子高度的总和。 输入使用数组…...

Java中数组和集合的对比,以及什么情况下使用数组更合适,什么情况下使用集合更合适。集合的基本介绍和集合体系图。

在Java中&#xff0c;数组和集合&#xff08;Java集合框架&#xff09;都用于存储多个元素。它们各自有不同的特点和适用场景。下面我会对数组和集合进行对比&#xff0c;并解释何时使用集合更好&#xff0c;以及何时使用数组更合适。 数组和集合的对比&#xff1a; 数组&…...

STM32之17.PWM脉冲宽度调制

一LED0脉冲宽度调制在TIM14_CHI&#xff0c;先将LED&#xff08;PF9&#xff09;代码配置为AF推挽输出模式&#xff0c;将PF9引脚连接到TIM14&#xff0c; #include <stm32f4xx.h>static GPIO_InitTypeDef GPIO_InitStruct;void Led_init(void) {//打开端口F的硬件时钟&a…...

VS2015打开Qt的pro项目文件 报错

QT报错&#xff1a;Project ERROR: msvc-version.conf loaded but QMAKE_MSC_VER isn‘t set 解决方法&#xff1a; 找到本机安装的QT路径&#xff0c;找到“msvc-version.conf”文件&#xff0c;用记事本打开&#xff0c; 在其中添加版本“QMAKE_MSC_VER 1900”保存即可。 …...

骨传导耳机会头疼吗?骨传导耳机会对身体不好吗

一般情况下&#xff0c;骨传导耳机不会引起头疼。由于骨传导耳机的工作原理是通过将声音传导到颞骨和耳部周围的骨骼来传达音频信号&#xff0c;而不是直接进入耳道&#xff0c;因此不会对耳朵造成压力或产生耳疼的感觉。 然而&#xff0c;每个人的感受和体验可能不同&#xff…...

【面试题系列】(一)

Redis有哪些数据结构&#xff1f;其底层是怎么实现的&#xff1f; Redis 系列&#xff08;一&#xff09;&#xff1a;深入了解 Redis 数据类型和底层数据结构 字符串&#xff08;String&#xff09;&#xff1a; 用于存储文本或二进制数据。可以执行字符串的基本操作&#xf…...

vscode C++17便捷配置教程(懒人版)

环境链接 以上是已经配置好的c17环境链接&#xff0c;直接下载解压即可&#xff08;注意文件路径上不要带有中文&#xff09; 下载解压之后按照msys64-mingw64-bin路径打开 然后单击该路径右方空白区域可直接复制路径 然后点击开始菜单搜索“环境变量“并打开&#xff08;如…...

动态数组实现链地址法哈希表

通常情况下哈希函数的输入空间远大于输出空间&#xff0c;因此理论上哈希冲突是不可避免的。比如&#xff0c;输入空间为全体整数&#xff0c;输出空间为数组容量大小&#xff0c;则必然有多个整数映射至同一数组索引。 解决哈希冲突方法常见有&#xff1a;链地址法、开放寻址…...

Eclipse(STS):pom.xml 报错:Multiple markers at this line

pom.xml 报错&#xff1a;Multiple markers at this line STS中&#xff0c;项目能够正常运行&#xff0c;但是 pom.xml 报错&#xff1a;Multiple markers at this line 项目本身没有任何修改&#xff0c;之前不报错的&#xff0c;突然报错了。 Multiple markers at this li…...

CSerialPort教程4.3.x (3) - CSerialPort在MFC中的使用

CSerialPort教程4.3.x (3) - CSerialPort在MFC中的使用 环境&#xff1a; 系统&#xff1a;windows 10 64位 编译器&#xff1a;Visual Studio 2008前言 CSerialPort项目是一个基于C/C的轻量级开源跨平台串口类库&#xff0c;可以轻松实现跨平台多操作系统的串口读写&#x…...

2022版 的IDEA创建一个maven项目(超详细)

一.设置idea中指定的maven的位置以及本地存储仓库 开发中一般我们使用自己下载的maven&#xff0c;不使用IDEA工具自带的&#xff0c;这就需要将我们下载的maven配置到IDEA工具中&#xff0c;配置如下图所示&#xff1a; 或者直接 快捷键 CtrlAltS 直接进入设置 maven home pa…...

lvs实现DR模型搭建

目录 一&#xff0c;实现DR模型搭建 1&#xff0c; 负载调度器配置 1.1调整ARP参数 1.2 配置虚拟IP地址重启网卡 1.3 安装ipvsadm 1.4 加载ip_vs模块 1.5 启动ipvsadm服务 1.6 配置负载分配策略 1.7 保存策略 2&#xff0c; web节点配置 1.1 调整ARP参数 1.2 配置虚拟I…...

设计模式之迭代器模式(Iterator)的C++实现

1、迭代器模式的提出 在软件开发过程中&#xff0c;操作的集合对象内部结构常常变化&#xff0c;在访问这些对象元素的同时&#xff0c;也要保证对象内部的封装性。迭代器模式提供了一种利用面向对象的遍历方法来遍历对象元素。迭代器模式通过抽象一个迭代器类&#xff0c;不同…...

【0基础入门Python Web笔记】二、python 之逻辑运算和制流程语句

二、python 之逻辑运算和制流程语句 逻辑运算控制流程语句条件语句&#xff08;if语句&#xff09;循环结构&#xff08;for循环、while循环&#xff09;continue、break和pass关键字控制流程语句的嵌套以及elif 更多实战项目可进入下方官网 逻辑运算 Python提供基本的逻辑运算…...

容器——Docker

1.安装docker服务&#xff0c;配置镜像加速器 2.下载系统镜像&#xff08;Ubuntu、 centos&#xff09; 3.基于下载的镜像创建两个容器 &#xff08;容器名一个为自己名字全拼&#xff0c;一个为首名字字母&#xff09; 4.容器的启动、 停止及重启操作 5.怎么查看正在运行的容器…...

SQL注入之宽字节注入

文章目录 宽字节注入是什么&#xff1f;注入练习让转义符失效联合查询 代码审计 宽字节注入是什么&#xff1f; 宽字节注入准确来说不是注入手法&#xff0c;而是另外一种比较特殊的情况。宽字节注入的目的是绕过单双引号转义。 宽字节注入是一种绕过单双引号转义的手段&#x…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

Spring事务传播机制有哪些?

导语&#xff1a; Spring事务传播机制是后端面试中的必考知识点&#xff0c;特别容易出现在“项目细节挖掘”阶段。面试官通过它来判断你是否真正理解事务控制的本质与异常传播机制。本文将从实战与源码角度出发&#xff0c;全面剖析Spring事务传播机制&#xff0c;帮助你答得有…...