关于antd表单的validateFieldsAndScroll没执行

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

#react.js

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

关于antd表单的validateFieldsAndScroll没执行

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

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

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

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

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

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因
weixin_43924896的博客
11-27 1万+
在使用antd form组件的的validateFields或者validateFieldsAndScroll方法时如果它没有进入方法而是直接跳过了方法，那不妨看看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。 补充一下我测的，调callback(null)相当于没执行callback; callba...
antd 表单点击提交没反应, validateFieldsAndScroll 没执行
业余前端的职业经历
04-30 3029
我的原因是 我在某个表单哪里自定义了 一个验证 删除之后 就可以提交了 具体详情看官方文档 https://ant.design/components/form-cn/ 看自定义验证方法validator代码块里是否有某一条分支没有执行 callback函数。官方规定：自定义校验callback 必须被调用。 ...
Ant Design Vue form表单validateFields无效果
qq_36126031的博客
02-18 5781
一、问题现象 Ant Design Vue的form组件，在点击提交时，无表单校验效果即无红字提示，但浏览器开发者工具（F12）有日志输出；逐个点击时，校验还都能触发，很奇怪。 二、解决方案 直接上才艺： 请仔细核对自己的表单检验中是否使用了自定义校验validator 使用排除法 即先将自定义校验全部注释掉，再次点击提交，此时应该是可以看到校验效果了，再将自定义校验逐一放开，并测试，即可将问题定位 三、反思 通过以上的定位检查后，应该就可以发现问题所在了，其实是自定义校验的代码出错了，但没有错
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3888
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
antd表单中的validateFields没有被执行可能的问题及解决
热门推荐
daihaoxin的专栏
05-14 1万+
文中所描述的问题及解决，适用于antd 3.x版本 今天在做一个修改密码的功能，逻辑极为简单，没有什么花头，然而在获取短信验证码的时候，如下代码中的form.validateFields的回调函数一直得不到执行，翻了两遍官方文档都没有找出问题。 onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;
，form.validateFields (()=＞{})根本不执行的问题解决
m0_55588706的博客
04-07 4138
项目场景： 自定义validator callback逻辑没有写完，form.validateFields (()=>{})根本不会执行 问题描述 找了很久的一个问题，提交时校验form.validateFields()不执行，不会报错 <Form.Item label='人口'> <InputGroup compact> {form.getFieldDecorator('people', {
自定义validator callback逻辑没有写完，会导致form.validateFields (()=>{})根本就不会执行
寬真
12-09 3611
<FormItem label="可申请范围"> {getFieldDecorator('canApplyScope', { // valuePropName: "checked", initialValue: undefi...
ant desgin表单校验并自动滚动到可见范围内
qq_35962740的博客
03-22 3024
在填写表单的时候，字段需要校验但又不在可视范围之内，这时候我们就需要让它自动滚到可见的范围之内，提升用户体验。 antd表单有两种验证方法validateFields和validateFieldsAndScroll，validateFields只是校验值，validateFieldsAndScroll校验值并且滚动到可视范围。 参数 validateFieldsAndScroll([fieldNames: string[]],[options: object],callback(errors, values
Ant Design Vue-Form 学习 --持续更新
做一只有梦想的蚂蚁
01-08 3434
Ant Design Vue FORM
React关于form的取部分字段数据
qq_38719039的博客
03-28 5143
1.获取表单的所有数据this.props.form.validateFieldsAndScroll((err, values) =&gt; { if(err){ return; } console.log('_values', values); });2. 获取表单的部分字段数据this.props.form.validateFieldsAndScroll([`timeUni...
使用Ant Design 4.x 表单提交时使用validateFields()方法校验多个表单的提交
weixin_45067896的博客
05-12 2126
在提交按钮的绑定的方法上使用Promise.all（[ a. validateFields() , b. validateFields() ,c.validateFields() ]）.then(res=>{就可以在执行表单提交的时候像验证一个表单一样去校验三个表单的值（比如校验字段是否必填），同时还可以同过getFieldsValue()方法拿到每个表单的值去执行想要操作。下面展示具体的使用代码。
antd的表单验证
qq_52845451的博客
10-26 1853
antd的表单验证
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4603
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
antd 上传组件 拖拽上传 form.validateFields()没有校验值
boy_hhx的博客
01-12 882
在用upload组件上传的时候，有两种方式，点击上传和拖拽上传，但是通过拖拽上传的没有校验的时候没有获取到值，所以就会提示没有上传，所以就在onChange事件里面。状态是done的时候，用form.setFieldsValue再次赋值就可以了。造成的原因可能是因为拖拽进来的，form表单上没有赋值。
antd 表单的校验如何去除掉
最新发布
09-29
用户的问题是关于 antd 表单，所以我应该提供一个简单的代码片段。 例如： ```jsx import { Form, Input } from 'antd'; const MyForm = () => { return ( <Input placeholder="Username" /> // 没有 rules...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值