antd表单验证无效的情况怎样解决？方法是什么？-群英

上一篇：vue怎样做点击展开收起的功能？方法是什么？下一篇：vue项目iview树形控件怎么样使用？

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表单的内容，大家可以关注其它的相关文章。

文本转载自脚本之家

标签： antd表单验证无效

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

上一篇：vue怎样做点击展开收起的功能？方法是什么？下一篇：vue项目iview树形控件怎么样使用？