antd中Form组件的验证问题

最新推荐文章于 2022-09-01 11:00:33 发布
最新推荐文章于 2022-09-01 11:00:33 发布
阅读量2k 收藏
点赞数
分类专栏： React后台管理项目笔记 记录贴 疑难点记录 文章标签： reactjs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Voiceu/article/details/115861059
版权

遇到一个官方文档的案例
在这里插入图片描述
不理解第二个函数式，理解是匿名函数，触发后返回一个包含validator函数对象的对象，
但是为什么传参要用对象形式写，不直接写getFieldValue，看到后面才知道
在这里插入图片描述

这里的form: FormInstance就是form的实例，虽然这里是冒号，但是感觉他写漏了花括号，这个应该是对象形式，就跟他例子一样，
但是如果是这样为什么不直接写（（ { FormInstance｝)=> xxx ）反而写（ （ form ： FormInstance ）=> xxx ）

这是函数式组件，直接复制过来，在class组件里面也能直接用，如下
在这里插入图片描述
在这里插入图片描述
所以应该是内部封装好了的，这种验证只能验证手动输入的，如果有回调函数利用setFieldsValue进行赋值，是不会触发表单验证的

VoiceU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AntD中Form表单自定义验证规则
莉兹Liz的博客
02-03 6080
需求 AntD中Form表单自定义验证规则，不能为xxx或者只能是xxx 代码 不能为xxx <Form.Item label="学生编码" name="stuId" validateFirst={true} // 出错时两个校验分别生效 rules={[ { required: true, message: '学生编码不能为空' }, { validator: (rule, value) => { let reg = new RegExp(/[\u4E00-\u9FA5]
ant 组件中如何主动触发校验
DDAD9527的博客
01-07 1944
问题: 想在某个动作之后单独触发某一个表单的验证 const chooseUser = () => { //执行一个函数之后 单独校验某个绑定的规则 formRef.value.validateFields(['schemeUserInfo']) }; formRef为表单绑定的 :model="formState" schemeUserInfo 为某一个表单的name <a-form-item label="策划人" class="da...
antd的form组件在form标签外触发验证
Lofan 的博客
01-14 6832
什么情况需要在form标签外触发验证呢？ 有，比如新增页是个全屏弹框的自定义组件，这种组件，一般都带有 close icon ，确认，取消按钮。 那不管这种弹框的内容是什么，都是要通过确认btn去触发。 写法还是那个写法，就是换个位置调用 如果触发按钮在Form标签内部，就直接在Form标签上绑定onSubmit事件，指向handleSubmit 方法； <Form onSubmit={ha...
antd-form表单 联动触发规则校验
weixin_53110831的博客
12-10 4094
antd-form表单 如何联动触发规则校验。
antd 校验表单时触发对其他表单的校验
热门推荐
lh_guojw的博客
03-22 1万+
import { Form, Input } from 'antd'; import React, { Component } from 'react'; class ComponentA extends Component { constructor(props) { super(props); } /** * * @param {} rule *...
[React hooks] Antd Form: Instance created by `useForm` is not connected to any Form element.Forget t
前端一线搬运工的博客
02-05 6682
场景: Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop 官方解释: 这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件 Form包裹在Modal中: 如果你的Form表单是包裹在Modal对话框中, 官方解决办法是:通过给 Modal 设置forceRender将其预渲染...
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
基于antd4二次封装的form组件
12-31
Form组件在antd中扮演着数据收集与验证的重要角色，它与Input、Select等控件配合，能够方便地创建表单。然而，原始的antd Form组件可能无法满足所有项目中的复杂业务逻辑，因此，二次封装是为了提高代码复用性、增强...
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
q-antd:双绑形式的antd。受控组件的双绑、Form的表单验证
05-01
使用Form组件和FormItem组件进行布局 使用Form的model属性和表单元素的duplex属性，进行数据的双绑。 使用Form的rules属性进行表单元素的校验 校验规则的写法参见 校验的触发，在各个规则中传入
在Vue中使用mockjs代码实例
01-22
前言 　　前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。 安装 npm install mockjs –save-dev 目录结构 配置 1、api下的config.js：配置axios的拦截处理 import axios from 'axios' // 创建一个axios实例 const service = axios.create({ //请求超时配置 timeout:3000 }) //添加请求拦截器 serv
React Form组件的实现封装杂谈
08-27
React Form组件的实现封装杂谈 在 React 框架中，Form 组件是非常常见的组件之一，它提供了与用户交互的方式，例如提交订单、设置系统等。Form 组件的实现封装可以达到简化开发的目的。本文将讨论 Form 表单组件...
antd的Form表单控制实例的使用
weixin_44956861的博客
07-14 7635
Form表单的控制实例一、业务常景：二、使用Form表单的实例来解决： 一、业务常景： 遇到一种业务场景，即一个简单的Modal框+ Form的一个组合，仔细思考了一下，和我们平时直接使用Form表单还是有一定的区别，我们通常是通过给Form表单绑定onFinish的回调函数，但是这里的业务需求是在model框上点击确定去提交表单，直接通过onFinish函数去回调是不太可行的。 二、使用Form表单的实例来解决： 打开Antd文档，发现有一个form的实例，这里说的稍稍有的绕，他的意思是你需要使用usF
ant.design（简称antd）中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合
ajiuyuan的博客
09-01 7107
1、以下是一个组件，首先引入ant相关依赖，在引入react相关依赖,主要使用了Form的2个内置函数和Form.useWatch进行监听指定字段,然后使用 form.setFieldsValue进行字段值更新。4、onFinishFailed函数是在按钮设置了htmlType="submit"属性，在点击效验规则有部分未通过效验时触发的函数。3、onFinish函数是在按钮设置了htmlType="submit"属性，在点击效验规则全部通过时触发的函数。下图是UI目标样式图。...
antd form 表单数据校验·记
青蛙king的博客
04-06 8721
1、一般的表单校验 2、连续的表单校验 3、连续的复杂表单校验
AntDesign表单Form实例方法（useForm/ref）
情非得已小猿猿
08-30 8464
1、获取表单实例 函数式组件: const AppletModal: React.FC<any> = (props) => { const [form] = Form.useForm(); } class类组件: import { FormInstance } from 'antd/lib/form'; class AppletEdit extends React.Component<any, any> { form: any = React.cr.
在Vue框架项目里通过Element Plus实现表单验证
weixin_46795387的博客
08-18 8808
在Vue框架项目里通过Element Plus实现表单验证
vue3.0笔记（二）
杨振洲的博客
02-22 153
关于setup一些细节问题及组件之间的传值 这里创建一个父组件 <template> <h2>App父级组件</h2> <h3>msg:{{ msg }}</h3> <button @click="msg += '==='">更新数据</button> <hr /> <Child :msg="msg" msg2="真香" @xxx="xxx" /> </template&gt
antd获取form表单数据的两种方法
前端劝退工程师
11-23 4673
使用useRef const formRef = useRef<FormInstance>(); <Form ref={formRef }/> //获取 const values = await formRef.current?.validateFields() 使用antd提供的钩子useForm const [form] = Form.useForm<FormInstance>(); <Form form={form}/> //获取 cons
antd Form 验证手机号
最新发布
06-08
你可以使用 antd 的 Form 组件来验证手机号码。具体实现步骤如下： 1. 引入 Form、Input 和 Button 组件 ```js import { Form, Input, Button } from 'antd'; ``` 2. 在 Form 组件中添加 Input 组件 ```js <Form...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值