解决antd Form 表单校验方法无响应的问题
70 浏览量
2021-01-18
18:33:34
上传
评论 2
收藏 95KB PDF 举报
解决解决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 },
],
})(
评论0
最新资源