当前位置: 首页 > 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…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...