关于 Ant Design Form 校验无效的问题

blueju 等级 475 0 0

关键词:

  • Ant Design v4.0.2
  • Form
  • Validation Invalid
  • 校验无效

情景

使用 React + Typescript + Ant Design 重构公司一反洗钱平台部分页面,其一表单需要验证,但是按照 Ant Design Form 中的 Demo 实现后并不效果。

Ant Design Form Demo Url

https://ant.design/components/form-cn/#components-form-demo-basic

解决

在 Form.Item 中,除了需要 rules 指明校验规则外,还必须拥有 name 属性,否则无法正常显示校验提示。

CodeSandbox Demo

https://github.com/blueju/BlogCodeSandBox/tree/antd-v4-form-validate

结语

这一细节,在 Ant Design Form 的文档中,并没有提及,使用时自己需要注意一下。

首发于语雀文档@blueju

收藏
评论区

相关推荐

基于create-react-app打包编译自己的第三方UI组件库并发布到npm
前言 这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件,并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm,供他人使用,就比如elementUI或者Ant Design。 如果想学习如何发布一个js库或者框架,那么使用rollup更为适合,可以参考如下文章: 前端组
【Golang】Go入门及进阶书籍推荐
Go入门教程全集 链接: https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg(https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg) 提取码: ki1e Cloud.Native.Go.pdf C和指针.pdf C面向对象多线程编程.pdf Design Patt
项目实战,动态增删form表单
前言 Hi,大家好,我是麦叔。今天老大让我做一个需求,我们的这个表单以前只支持录入一个检查器具。现在要求改为可以动态添加,满足录入多个器具。作为前
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
Ant Design 可编辑的树形表格
Ant Design Editable Tree TableAnt Design of React Editable Tree Table可编辑的树形表格Need in the work, but i did not find readymade components easy to understand after Baidu and Googl
关于 Ant Design Form 校验无效的问题
关键词: Ant Design v4.0.2 Form Validation Invalid 校验无效<a name"9pt4x"</a 情景使用 React Typescript Ant Design 重构公司一反洗钱平台部分页面,其一表单需要验证,但是按照 Ant Design Form 中的 Demo 实现后并不效果。<a n
【Flutter实战】输入框和表单
3.7 输入框及表单Material组件库中提供了输入框组件TextField和表单组件Form。下面我们分别介绍一下。 3.7.1 TextFieldTextField用于文本输入,它提供了很多属性,我们先简单介绍一下主要属性的作用,然后通过几个示例来演示一下关键属性的用法。dartconst TextField({ ...
React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)
前言我的个人博客样式布局是仿的稀土掘金 ,个人博客线上网址:https://www.maomin.club/ ,也可以百度搜索前端历劫之路 。为了浏览体验,可以用PC浏览器浏览。本篇文章将分为前台角度与后台角度来分析我是怎么开发的。前台角度 主要资源 react.js ant Design foreditor axio
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
一篇文章浅析Django Form组件相关知识
前言在上一篇时,我们小试牛刀了以下Django Form组件的使用,,没来得及的小伙伴可以一起看看。但是你可能会有很多疑问,并不知道怎么使用。并且知道Form组件的功能。 生成HTML标签。 验证提交的数据。 保留提交之前的数据。 所以本篇就接着上次的继续,来一起学习以下Django Form组件如何使用。 Form组件的
一篇文章带你了解Django Form组件(入门篇)
前言Hey,大家好呀,我是码农,星期八。本次咱们来get一个新技能,Form组件。Form组件主要用于验证表单数据。为什么需要Form组件注:Form组件,只适用于,前后端未分离的项目中,主要用于验证表单数据,所以,关键字是表单!!!比如像哔哩哔哩的注册界面。我点击注册,它不仅仅可以知道我的注册昵称是否存在,密码是否小于6位,手机号格式错误。 还会把错误信