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

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值的变量还没有进行更新这里就已经进行验证了,这样的验证会导致,即便我已经上传了一张图片,页面上仍然会提示要我上传相关图片,删除图片却不会调用到表单验证。

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

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

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

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

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

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

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

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

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

这样就解决了我的问题。

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

(0)

相关推荐

  • antd-DatePicker组件获取时间值,及相关设置方式

    DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment. import moment from "moment"; import "moment/locale/zh-cn" format属性,设置日期的格式,如"2020-02-28". 设置日期 选择日期是今天之前[包含今天] 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { consol

  • Antd表格滚动 宽度自适应 不换行的实例

    我就废话不多说了,大家还是直接看代码吧~ <Table className={styles.table} rowKey={(record) => record.key} columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了 pagination={false} /> styles.less .table { :global { .ant-

  • Antd的table组件表格的序号自增操作

    1,效果图 2,实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <span> <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}&

  • antd 表格列宽自适应方法以及错误处理操作

    当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量 也就是没有设置宽度的列会平分表格中余下的宽度 在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的, 也就是说白色部分实际是原列, 只不过是被隐藏了 这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新

  • 解决Antd Table组件表头不对齐的问题

    背景: 在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为解决问题.现整理下完整的解决方案: 1.对表格的每一行 [columns]设置width属性(留出一行进行宽度自适应): 2.scroll属性中的x选择一个合适的值(或者直接设为 max-content): 如果以上两步仍解决不了对齐问题的话,请继续第三步操作 3.对t

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

    antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • php实现跨域提交form表单的方法【2种方法】

    本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '

  • 用JavaScrip正则表达式验证form表单的方法

    document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • HTML form表单提交方法案例详解

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for

  • Element通过v-for循环渲染的form表单校验的实现

    目录 普通的form表单校验 v-for 循坏的表单校验 实现的代码 普通的form表单校验 日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题. 查阅Element官方文档,我们了解到,form表单校验是这样的,需要给所校验的el-form-item添加prop属性值,这个属性值便就是当前元素v-model 所绑定的值.如图所示: v-for 循坏的表单校验 那么问题来了,通过v-for 遍历循环渲染的form表单怎么添加校验呢?主要问题就在于其prop了. 再次阅读官方文

  • SpringSecurity自定义Form表单使用方法讲解

    目录 背景 实验-HttpBasic 实验-自定义登录页面 实验-自定义登录接口 实验-自定义登录数据参数 实验-自定义登录失败.成功处理器 实验-自定义登录成功跳转页面 实验-自定义退出接口 背景 本系列教程,是作为团队内部的培训资料准备的.主要以实验的方式来体验SpringSecurity的各项Feature. 新建一个SpringBoot项目,起名springboot-security-form,核心依赖为Web,SpringSecurity与Thymeleaf. <dependencie

  • JSON生成Form表单的方法示例

    JSON表单描述 JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,它可以用简短的几行代码,快速的生成Form表单. JSON表单的优点是: 可以快速构建出一个表单 表单的数据.逻辑.视图分离,方便抽离和进一步抽象 提供校验.自动缓存等额外功能,提升录入体验 可以跨项目的共用复杂的表单组件 原始表单的缺点 1:代码量庞大,开发效率低 每次开发一个表单页的时候,都需要重复编写表单组件及其交互事件的代码,这块代码重复编写且与主线业务逻辑无关,除此之外,

随机推荐