antd表单验证无效的情况怎样解决？关于antd form表单验证实现的问题，本文给大家分享两种解决方法，方法如下，有需要的朋友可以借鉴参考。

方法一：

getFieldDecorator没有第三个参数，如果写了3个参数就会出错

错误代码：

<Form.Item>
   {
    getFieldDecorator('userName', { initialValue: 'Tom' },{
    rules: [{
     required: true, message: '请输入用户名',
    }],
    })(
    <Input placeholder='请输入用户名'/>
    )
   }
</Form.Item>

正确代码：

<Form.Item>
 {
 getFieldDecorator('userName',{
  initialValue:'Tom',
  rules:[
   {required: true,message:'请输入用户名'}
    ]
   })(
   <Input placeholder='请输入用户名'/>
   )
}
</Form.Item>

方法二：通过setFieldsValue来设置默认值可以解决

this.props.form.setFieldsValue({
 inputValue1:this.state.inputValue1,
 inputValue2:this.state.inputValue2,
 inputValue3:this.state.inputValue3,
});

如果还不能解决，查看是否在表单提交函数里写了验证代码

handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err) => {
   if (err) {
    console.log('表单验证失败');
   }else{
    this.handleOk();//这里是表单验证成功执行的函数
    
   }
  });
 
 };

补充知识：antd自定义组件初始值没有返回或者设置initialValue，form.validateFields不会执行验证

在自定义组件中加个componentDidMount返回初始值就可以啦

 componentDidMount() {
  const { onChange } = this.props;
  onChange({
   ...this.state,
  });
 }

    关于antd表单验证无效的解决方法就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多antd form表单的内容，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Angular自定义格式的方法是什么？

  怎么自定义angular-datetime-picker格式？下面本篇文章聊聊自定义格式的方法，希望对大家有所帮助！

• JavaScript的保留字是什么意思，包括哪些？

  JavaScript的保留字是什么意思，有哪些？javascript的保留字有：abstract、double、goto、native、static等等，很多新手不清楚JavaScript的保留字是什么，对此本文就给大家来简单的介绍一下，大家在使用JavaScript时，对于JavaScript的保留字要注意。

• 小程序下拉加载更多商品的效果怎样做，代码是什么

  这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Vue基本指令有几种,基本用法是怎样的

  这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下

• Vue中前端异步网页弹框怎么实现，哪些点要注意

  这篇文章主要为大家介绍了vue.js前端网页弹框异步的行为示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助祝大家多多进步，早日升职加薪