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

最新推荐文章于 2023-10-30 16:50:49 发布
转载 最新推荐文章于 2023-10-30 16:50:49 发布 · 1w 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/adec74c4097a
文章标签：

#antd #form #validate

本文深入探讨了在使用Ant Design的Form组件时，validateFields及validateFieldsAndScroll方法的常见问题。特别关注自定义验证方法中callback函数的正确调用，避免因忽略此细节而导致的验证逻辑失效。

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

在使用antd form组件的的validateFields或者validateFieldsAndScroll方法时如果它没有进入方法而是直接跳过了方法，那不妨看看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。

补充一下我测的，调callback(null)相当于没执行callback; callback(undefined)相当于callback()

antd vue表单验证_antd表单验证this.form.validateFields不能处理错误情况。
weixin_39850150的博客
12-20 6951
问题描述在vue框架内使用ant-design组件,页面内有一个表单，设定的表单规则比较简单，就是必填。但是即使什么都不输入，直接提交也可以输入内容也可以新增或修改成功。也就是表单的校验规则没有生效。问题出现的环境背景及自己尝试过哪些方法我猜测this.form.validateFields会自动处理错误情况，然后这项任务可能是比较底层的依赖去做的，ant-design文档页提到了async-va...
react项目中antd组件库的使用需要注意的问题
Dancy的博客......
12-19 4278
antd是蚂蚁金服推出的ui组件库，给我们在react项目开发中提供了大大的便利。但在使用的过程中，或多或少的会遇到一些问题，毕竟，用的是别人的东西，就得遵守别人的规则嘛！官方文档：https://ant.design/docs/react/introduce-cn 1. 国际化（中文化） 通过官方文档我们可以知道，很多组件如DatePicker、Modal等等默认的文本都是英文。如果是输入框的提...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
关于antd表单的validateFieldsAndScroll没执行
cc常 的博客
09-08 2528
关于antd表单的validateFieldsAndScroll没执行 看了其他博主的文章，附上 antd 表单点击提交没反应, validateFieldsAndScroll 没执行 关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因 可能是validator验证没有执行 callback 函数，但是我的情况有些不一样，做点补充，我是使用validator去验证了长度，但是是两个rule规则使用了同一个validator验证，导致表单不能
antd 表单点击提交没反应, validateFieldsAndScroll 没执行
业余前端的职业经历
04-30 2925
我的原因是 我在某个表单哪里自定义了 一个验证 删除之后 就可以提交了 具体详情看官方文档 https://ant.design/components/form-cn/ 看自定义验证方法validator代码块里是否有某一条分支没有执行 callback函数。官方规定：自定义校验callback 必须被调用。 ...
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3877
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
Ant Design Form表单提交时校验失败无法自动滚动目标字段
weixin_42888238的博客
04-08 2461
Ant Design Form组件 问题: Ant Design Form表单提交时校验失败无法自动滚动目标字段 方案: Form.useForm().scrollToField() 具体实现: const onFinish = async () => { try { await form.validateFields() // 触发表单验证 // 具体业务逻辑 } catch (error) {
antd表单中的validateFields没有被执行可能的问题及解决
热门推荐
daihaoxin的专栏
05-14 1万+
文中所描述的问题及解决，适用于antd 3.x版本 今天在做一个修改密码的功能，逻辑极为简单，没有什么花头，然而在获取短信验证码的时候，如下代码中的form.validateFields的回调函数一直得不到执行，翻了两遍官方文档都没有找出问题。 onGetSMS = () => { const { form, sendSmsModifyPWD, sendEmailForResetPassword } = this.props; const { type } = this.state;
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了未定义的变量。 注意： 1、使用validator 时，注意自定义方法中是否有错误；对于如何解决没有错误提示，官网提示：可以选择通过 async 返回一个 promise 或者使用 try…catch进行错误捕获，具体查看官网form组件； 2、使用validator 时，自定义方法中 callback 必须被调用。
Ant Design validateFields不起作用
weixin_44780381的博客
04-14 1201
Ant Design validateFields不起作用 问题描述： 项目中使用校验方式是自定义校验规则，validateFields 方法不执行，不校验表单项， 然后看了仔细看官方文档 刚开始的理解是，每个函数体中需执行 一下 callBack() ，如图： 这样是不正确的，后来我在方法的最后一行也加了callBack() , 如图： 这样就可以了，所以，必须确保你代码执行的最后一行是 callBack() , 才可以 ———————————————— 版权声明：本文为优快云博主「一张白纸雪」的原创文
自定义validator callback逻辑没有写完，会导致form.validateFields (()=>{})根本就不会执行
寬真
12-09 3587
<FormItem label="可申请范围"> {getFieldDecorator('canApplyScope', { // valuePropName: "checked", initialValue: undefi...
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4529
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
Vue Ant Design validateFields不起作用
baixue0111的博客
07-15 6691
问题描述： 项目中使用校验方式是自定义校验规则，validateFields 方法不执行，不校验表单项， 然后看了仔细看官方文档 刚开始的理解是，每个函数体中需执行 一下 callBack() ，如图： 这样是不正确的，后来我在方法的最后一行也加了callBack() , 如图： 这样就可以了，所以，必须确保你代码执行的最后一行是 callBack() , 才可以。 ...
，form.validateFields (()=＞{})根本不执行的问题解决
m0_55588706的博客
04-07 4100
项目场景： 自定义validator callback逻辑没有写完，form.validateFields (()=>{})根本不会执行 问题描述 找了很久的一个问题，提交时校验form.validateFields()不执行，不会报错 <Form.Item label='人口'> <InputGroup compact> {form.getFieldDecorator('people', {
表单校验validate、validateField通过时不执行相关代码问题，只有校验不通过才执行
前端小白的逆袭
10-12 2628
表单校验validate、validateField通过时不执行相关代码问题，只有校验不通过才执行
在react中使用antd ProForm的表单检验来实现表单密码确认
最新发布
m0_73356046的博客
10-30 1089
react中使用ProForm中的校验来完成密码确认需求
ant desgin表单校验并自动滚动到可见范围内
qq_35962740的博客
03-22 2935
在填写表单的时候，字段需要校验但又不在可视范围之内，这时候我们就需要让它自动滚到可见的范围之内，提升用户体验。 antd表单有两种验证方法validateFields和validateFieldsAndScroll，validateFields只是校验值，validateFieldsAndScroll校验值并且滚动到可视范围。 参数 validateFieldsAndScroll([fieldNames: string[]],[options: object],callback(errors, values
Ant Design Vue form表单validateFields无效果
qq_36126031的博客
02-18 5668
一、问题现象 Ant Design Vue的form组件，在点击提交时，无表单校验效果即无红字提示，但浏览器开发者工具（F12）有日志输出；逐个点击时，校验还都能触发，很奇怪。 二、解决方案 直接上才艺： 请仔细核对自己的表单检验中是否使用了自定义校验validator 使用排除法 即先将自定义校验全部注释掉，再次点击提交，此时应该是可以看到校验效果了，再将自定义校验逐一放开，并测试，即可将问题定位 三、反思 通过以上的定位检查后，应该就可以发现问题所在了，其实是自定义校验的代码出错了，但没有错
Vue+Antd表单校验form.validateFields执行错误的解决方法
碎碎念的安静的博客
03-16 1万+
以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行 //自定义校验（检查手机号是否输入正确） checkPhone(rule, value, callback) { if (value != null && value != "") { var reg = /^1[3456789]\d{9}$/; ...
antd react form表单 执行onFinish方法时 formData数据没有传递给后端的原因
06-03
可能是因为您在提交表单时没有将 formData 数据传递给后端。您可以尝试在提交表单时将 formData 数据作为参数传递给后端接口。 具体实现方式可以参考以下步骤： 1. 在表单中设置 onFinish 方法，并将 formData 作为参数传递给 onFinish 方法。 ```jsx <Form onFinish={(formData) => this.handleSubmit(formData)}> // 表单项 </Form> ``` 2. 在 handleSubmit 方法中将 formData 数据作为参数传递给后端接口。 ```jsx handleSubmit = (formData) => { // 发送请求 axios.post('/api/submit', formData) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); } ``` 请注意，您需要根据您的具体代码和后端接口进行调整。如果您仍然无法解决问题，请提供更多细节和代码以便我更好地帮助您。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值