解决antd Form 表单校验方法无响应的问题


Posted in Javascript onOctober 27, 2020

antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll

里面可以接收校验字段数组, options, 和一个回调函数

from.validateFields([name, age], {}, (err, val)=> {})

校验全部表单数据

from.validateFields((err, val)=> {}) // 无响应

发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了

from.validateFields([name, age], (err, val)=> {}) // 正常

只要校验我自定义的一个表单组件, 这个方法就会无响应, 原因就是我自定义组件的自定义校验出现了问题

也就是 validator 方法里出现了问题 好好看看你的自定义校验吧

rules: [
 {
 validator: (rule, value, callback) => {
 callback()
 },
 },
],

补充知识:解决Antd自定义表单验证问题

最近项目中遇到一个表单校验的问题,看官方文档、网上搜索找了好久,终于找到了解决方案。

先阐述一下问题:

项目中的表单需要多图片上传,这个使用Upload组件就OK了,但是表单验证就出现问题了:

1、首先,上传图片项是必须项,不能无图片提交;

2、已上传的图片可以删除;

3、后端要求提交的图片为md5格式,通过上传接口获取图片的md5值,这样就不能直接使用表单提交时获取的 value值,因 为它的值是本地路径,所以我通过model中上传图片获取md5的值存在model的state中 (这个问题是最棘手的)。

解决问题:

1、首先我自定义了一个表单验证方法,因为需要以上传成功的图片为基准。

自定义表单校验方法:

handleCheckImg = (rule, value, callback) => {
 if (value) {
 const { aware } = this.props;
 const { fileList } = aware;
 const newFileList=fileList.map(item => ({...item}));
 if (!newFileList) {
 callback('请上传相关图片');
 } else {
 newFileList.length ? callback() : callback('请上传相关图片');
 }
 }
 callback(); // callback方法必须要有,否则会报错
};

在表单中调用:

<FormItem label="上传图片">
 {getFieldDecorator('attachment', {
 rules: [
 { required: true, message: '请上传相关图片' },
 { validator: this.handleCheckImg },
 ],
 })(
 <div className="clearfix">
 <Upload {...uploadProps} >
 ......
 </Upload>
 </div>
 )}
</FormItem>

此时表单的验证规则会调用到自定义的表单验证方法,但是由于验证方法默认是在表单onChange的时候调用,而默认onChange时进行表单验证,在model中用于存放图片md5值的变量还没有进行更新这里就已经进行验证了,这样的验证会导致,即便我已经上传了一张图片,页面上仍然会提示要我上传相关图片,删除图片却不会调用到表单验证。

解决antd Form 表单校验方法无响应的问题

那要怎么解决?那就让我点击按钮准备submit时进行表单验证吧。

2、通过看文档,表单的getFieldDecorator方法中有个属性validateTrigger可以设置什么时候进行表单验证,默认是onChange。

解决antd Form 表单校验方法无响应的问题

于是我在方法中添加该属性,设置为onSubmit:

getFieldDecorator('attachment', {
 rules: [
 { required: true, message: '请上传相关图片' },
 { validator: this.handleCheckImg },
 ],
 validateTrigger: 'onSubmit', // 设置进行表单验证的时机为onSubmit
 initialValue: detail ? detail.imgList : null,
})

这样设置了以后虽然可以正常进行表单验证了,但是,当点击了一次提交按钮后,表单验证过的表单项不会再进行验证。那万一我点击一次提交后,表单中其他表单项有问题,而图片上传没有问题,那我将其他表单项都填好符合验证格式后,删除了图片,再点击提交按钮,表单不会再验证图片上传的表单项,这样就被通过了,不行呀,这是一个bug。

解决antd Form 表单校验方法无响应的问题

怎么解决呢?那就点击提交的时候,都对所有表单项进行一次验证,无论是否已经验证过的。

3、Antd框架的validateFields方法中有一个force属性可以设置是否对已校验过的表单项再次校验,默认是false。

解决antd Form 表单校验方法无响应的问题

于是我在该方法中添加这个属性,设置为true。

handleSubmit = (e) => {
 e.preventDefault();
 this.props.form.validateFields({ force: true }, (err, values) => { // 设置force为true
 ......
 });
};

这样就解决了我的问题。

解决antd Form 表单校验方法无响应的问题

以上这篇解决antd Form 表单校验方法无响应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
js获取class的所有元素
Mar 28 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
js转换对象为xml
Feb 17 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
You might like
也谈php网站在线人数统计
2008/04/09 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
javascript document.images实例
2008/05/27 Javascript
javascript数组的使用
2013/03/28 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue项目实战总结篇
2018/02/11 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
如何对python的字典进行排序
2020/06/19 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Django权限控制的使用
2021/01/07 Python
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
大队委员竞选稿
2015/11/20 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS