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

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

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 "htmlcode">

<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 "" src="/UploadFiles/2021-04-02/20201027153127.jpg">

怎么解决呢？那就点击提交的时候，都对所有表单项进行一次验证，无论是否已经验证过的。
3、Antd框架的validateFields方法中有一个force属性可以设置是否对已校验过的表单项再次校验，默认是false。

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


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


这样就解决了我的问题。

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