关于antd表单的validateFieldsAndScroll没执行

最新推荐文章于 2024-07-29 17:25:13 发布
原创 最新推荐文章于 2024-07-29 17:25:13 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js

本文介绍了在使用antd表单时遇到的validateFieldsAndScroll方法未执行的问题。作者通过分析发现，问题可能在于使用相同的validator进行多个字段的长度验证，从而导致表单无法正常提交。解决方案是避免对不同字段使用同一个验证定义。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于antd表单的validateFieldsAndScroll没执行

看了其他博主的文章，附上

antd 表单点击提交没反应, validateFieldsAndScroll 没执行

关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因

可能是validator验证没有执行 callback 函数，但是我的情况有些不一样，做点补充，我是使用validator去验证了长度，但是是两个rule规则使用了同一个validator验证，导致表单不能提交。所以请不要用同一个validator定义多个rule规则！

附上图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

react项目中antd组件库的使用需要注意的问题
Dancy的博客......
12-19 4270
antd是蚂蚁金服推出的ui组件库，给我们在react项目开发中提供了大大的便利。但在使用的过程中，或多或少的会遇到一些问题，毕竟，用的是别人的东西，就得遵守别人的规则嘛！官方文档：https://ant.design/docs/react/introduce-cn 1. 国际化（中文化） 通过官方文档我们可以知道，很多组件如DatePicker、Modal等等默认的文本都是英文。如果是输入框的提...
Ant Design在React hooks项目中的使用问题记录
Dancy的博客......
06-02 953
本文主要记录本人在使用antd开发react hooks项目过程中，遇到的组件使用上的问题记录。总结一句话：多多熟悉官网文档，没有过不去的坎！ 内容涉及以下antd组件： Form 组件 Select 组件 TreeSelect 组件 Table 组件 Pagination 组件 ConfigProvider 官方文档链接：点击查看 Ant Design 官方文档 一、Form 组件 表单默认值设置问题 复杂的动态新增表项问题 动态新增默认值设置问题 多选Select导致表单样式错位问题 自定义组件问题
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因
weixin_43924896的博客
11-27 1万+
在使用antd form组件的的validateFields或者validateFieldsAndScroll方法时如果它没有进入方法而是直接跳过了方法，那不妨看看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。 补充一下我测的，调callback(null)相当于没执行callback; callba...
antd 表单点击提交没反应, validateFieldsAndScroll 没执行
业余前端的职业经历
04-30 2914
我的原因是 我在某个表单哪里自定义了 一个验证 删除之后 就可以提交了 具体详情看官方文档 https://ant.design/components/form-cn/ 看自定义验证方法validator代码块里是否有某一条分支没有执行 callback函数。官方规定：自定义校验callback 必须被调用。 ...
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3871
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
antd form validateFields的校验指定元素
热门推荐
MYG_G
10-29 5万+
参考文献：https://3x.ant.design/components/form-cn/#components-form-demo-validate-other antd form validateFields的校验指定元素 其实antd form validateFields有三种用法，用于不同的场景。 下图是antd关于validateFields的介绍。 1.校验form所有字段 这是最常用的写法，一般在提交表单的数据时候，大多数情况用这种写法，对于所有元素的正确性进行校验，只有全部通过校验才能
antd表单非空校验失效
最新发布
03-27
用户引用了四个资料，主要涉及validateFields和validateFieldsAndScroll方法的使用，自定义验证规则的问题，设置initialValue后验证失效的情况，以及自定义验证中未正确调用callback的情况。根据这些信息，我需要...
antd Form组件判断所有输入项不同时为空
06-10
首先，在您的 Form 组件中，需要定义一个 onSubmit 方法，用于提交表单。在 onSubmit 方法中，使用 validateFieldsAndScroll 方法来获取所有表单项的值，并进行判断： ```javascript import { Form, Button, Input ...
antd form表单校验使用 validateFields
ximinglei的博客
05-18 1万+
我们在表单总会遇到必填项需要校验类似于 这样的 切换座机和电话就需要立即出发正则判断验证 但是切换的时候没有及时出发正则验证到时bug出现 因为正则时经过输入框判断来出发的 所以select 改变没有出发正则 所以需要antd里面的属性经过 你看到也很蒙不知道如何调用 因为调用会出发说有的校验但时候很尴尬 所以你需要只调用里面的一项 // 这是你ref名称 formRef.current.validateFields(['你要触发校验的名字']); 希望对你有帮助 避雷成功！！！ ...
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4486
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
antd validator ajax,antd中的validateFields返回的Promise中的values对象的key对应的value为undefined...
weixin_39983404的博客
08-06 1861
在form表单中，我想获取到一个input输入框的的name和其值，都是返回的值老是为undefined。代码如下formRef = React.createRef();name="category_form"className="category_form"ref={this.formRef} //创建ref>name="categoryName"rules={[{required: t...
【Antd】form.validateFields的.catch的errorFields为空数组但依然报错的原因及解决办法
hzxOnlineOk的博客
07-29 748
【代码】【Antd】form.validateFields的.catch的errorFields为空数组但依然报错的原因及解决办法。
Antd form validatefields errorfields 为空依然报错
jackliujay的博客
05-14 714
需要在执行validate之前延迟一下，让页面渲染结束才行。
使用Ant Design 4.x 表单提交时使用validateFields()方法校验多个表单的提交
weixin_45067896的博客
05-12 1971
在提交按钮的绑定的方法上使用Promise.all（[ a. validateFields() , b. validateFields() ,c.validateFields() ]）.then(res=>{就可以在执行表单提交的时候像验证一个表单一样去校验三个表单的值（比如校验字段是否必填），同时还可以同过getFieldsValue()方法拿到每个表单的值去执行想要操作。下面展示具体的使用代码。
antd的表单验证
qq_52845451的博客
10-26 1802
antd的表单验证
关于使用antd vue 表单组件的validateFields的注意点
Admin_yws的博客
07-02 5691
this.form.validateFields({ force: true }, (err, values) => { //此处出现错误，不会被浏览器捕获（不会在控制台抛错），会导致出错代码后的正常代码无法正常执 行 });
antd表单中的validateFields没有被执行可能的问题及解决
daihaoxin的专栏
05-14 1万+
文中所描述的问题及解决，适用于antd 3.x版本 今天在做一个修改密码的功能，逻辑极为简单，没有什么花头，然而在获取短信验证码的时候，如下代码中的form.validateFields的回调函数一直得不到执行，翻了两遍官方文档都没有找出问题。 onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;
ant desgin表单校验并自动滚动到可见范围内
qq_35962740的博客
03-22 2911
在填写表单的时候，字段需要校验但又不在可视范围之内，这时候我们就需要让它自动滚到可见的范围之内，提升用户体验。 antd表单有两种验证方法validateFields和validateFieldsAndScroll，validateFields只是校验值，validateFieldsAndScroll校验值并且滚动到可视范围。 参数 validateFieldsAndScroll([fieldNames: string[]],[options: object],callback(errors, values
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值