React antd进行表单验证误报

最新推荐文章于 2023-11-03 13:03:14 发布
最新推荐文章于 2023-11-03 13:03:14 发布
阅读量532 收藏
点赞数
分类专栏： 前端成长记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IamasSuperMan/article/details/118682535
版权

使用React antd进行表单验证时，已经给表单元素赋值了，但无法通过验证

  1. 在做表单编辑时，需要对表单进行默认值显示，但是使用radio、upload、rangePicker等组件时，需要给formItem设置initialValue或通过form的setFieldsValue来进行表单初值的赋值。
突发奇想自然保护区
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
react axios请求报错，全屏展示Uncaught runtime errors:
最新发布
m0_59148573的博客
11-03 1422
2.找到config下webpackDevServer.config.js,然后按下图去改。原因：webpack-dev-server。解决方法：1.npm run eject。
React搭建报错：Uncaught ReferenceError: regeneratorRuntime is not defined
CommonBorage
05-14 900
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。 例如当使用async/await时，运行项目就会报上面的错。 解决方法： $ npm install -save-dev babel-polyfill ...
react报错 Uncaught Error: Objects are not valid as a React child (found: object with keys {a} ...
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-27 4万+
一、报错信息 Uncaught Error: Objects are not valid as a React child (found: object with keys {content, key, duration}). If you meant to render a collection of children, use an array instead. 意思是：未捕获错误：对象作为React子对象无效（找到：具有键{content，key，duration}的对象）。如果要呈现子对..
Uncaught runtime errors: × ERROR Avoided redundant navigation to current location: “/xxx“.
lplovewjm的博客
05-22 1万+
vue导航当前路由报错解决方案
antd的表单验证
qq_52845451的博客
10-26 1604
antd的表单验证
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
React中使用async validator进行表单验证的实例代码
10-18
react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
create-react-app脚手架新建项目后，启动项目，浏览器报错问题解决
qq_42753705的博客
12-09 1220
使用 create-react-app 脚手架新建项目后，启动项目浏览器报错：Uncaught TypeError: Cannot read property ‘forEach’ of undefined at Object.injectIntoGlobalHook 这是因为React网页调试工具是老版本的，与新的脚手架有冲突导致的 解决方法1：进入谷歌拓展程序，关闭或移除React Developer Tools扩展 解决方法2：进入 项目目录\node_modules@pmmmwh\react-re
antd使用了labelInValue form的validateField校验失败
Amelie4444的博客
06-23 1453
react项目,使用了antd和ProTable，因为某个select数据后端接口同时需要value和name,所以使用了labelInValue属性. 但这直接导致validateField不能校验该字段必填。因为未填写该字段，表单提交的也是个空对象，所以校验不到。多个阶段console log,我发现第一次进入页面的时候所有校验都会触发 因为这个时候是undefined 但是在选择一个值之后再删除 设置过labelInValue的属性的字段 直接就变成{ }了 于是在onChange的时候 把值恢
React Antd 4 使用类方法，提交表单时触发验证
gzericlee的专栏
03-18 1791
注意 如果你还没升级Antd 4，此文不适用。 个人比较习惯用Class component，此文不适用于Form.useForm 步骤 1、在 class component 下，可以通过 ref 获取数据域 2、在提交时，使用validateFields() 或 getFieldsValue()来获取表单值 建立Form的ref formRef = React.createRef(); <Form name="normal_login" className="login-for
React开发（124）:ant design学习指南之form中的validateFields
歌谣的博客
09-01 647
提交时候的属性值为对象
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
lplovewjm的博客
05-20 3338
vue2与vue-router兼容性问题及解决方案。
【React错误处理】超全指南来了
weixin_44545357的博客
04-23 2972
在React中，未捕获错误会导致DOM被卸载, 浏览器无法渲染。那错误处理：是什么？为什么？怎么做？
antd Form报错：Warning: You cannot set a form field before rendering a field associated with the value.
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-07 5334
一、报错信息： Warning: You cannot set a form field before rendering a field associated with the value. 警告：在呈现与值关联的字段之前，不能设置表单字段。 原因：这个是使用Form表单时会出现,原因时使用表单setFieldsValue时，有的字段设置了，但Form里不存在这个field。需要保证赋值的数据中的各项要在form的field中。 解决方案： 示例： Form里有两个字段name和passw..
axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
weixin_46525113的博客
05-25 2万+
axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
antd中表单校验填写数值检测不到内容，报错（数组多层嵌套）
qq_40431271的博客
12-24 2004
今天写一个多层的可编辑添加删除的表单在保存校验的时候出现了一些问题 就算页面有值也会提示报错信息； 百度了一番查到了一个大神写的，内容很详细 大神解决方案，请点击 主要代码如下图（特写此文章做个记录） ...
react antd from表单rules
07-13
在 React 中使用 Ant Design（antd）的表单组件时，可以使用 rules 属性来定义表单字段的校验规则。下面是一个示例： ```jsx import { Form, Input, Button } from 'antd'; import { UserOutlined, LockOutlined } from '@ant-design/icons'; const MyForm = () => { const onFinish = (values) => { console.log('Received values:', values); }; return ( <Form onFinish={onFinish}> <Form.Item name="username" rules={[ { required: true, message: '请输入用户名' }, { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }, ]} > <Input prefix={<UserOutlined />} placeholder="用户名" /> </Form.Item> <Form.Item name="password" rules={[ { required: true, message: '请输入密码' }, { min: 6, message: '密码长度不能少于6个字符' }, ]} > <Input.Password prefix={<LockOutlined />} placeholder="密码" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default MyForm; ``` 在上面的示例中，我们使用了 Input 和 Input.Password 组件作为表单字段的输入框，分别用 UserOutlined 和 LockOutlined 图标作为输入框前缀。在 Form.Item 组件中，通过 rules 属性定义了每个字段的校验规则，包括必填项、正则表达式和最小长度等。在表单提交时，可以通过 onFinish 方法获取表单字段的值。 这只是一个简单的示例，你可以根据自己的需求和具体的表单字段进行相应的规则定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值