form表单，校验未通过不可以点击提交按钮或置灰提交按钮

最新推荐文章于 2025-08-25 15:41:35 发布

原创最新推荐文章于 2025-08-25 15:41:35 发布 · 7.1k 阅读

6 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Ant Design的Form组件中实现实时校验，通过自定义函数检查表单字段是否为空或未上传图片，从而禁用提交按钮，确保数据完整性。

部署运行你感兴趣的模型镜像

1.antd里form表单需要点击提交按钮后才校验，如果想在这之前校验，可以通过获取值自定义校验是否满足。

// 点击提交前校验form表单是否都通过
    hasErrors =()=>{ 
        const {photosList} = this.state //photosList为上传图片的数量
        const fieldsValue = this.props.form.getFieldsValue();
        const errArr = Object.keys(fieldsValue).filter(item =>
        {
            return (['undefined', '', 'null', '[]'].includes(('' + fieldsValue[item]).trim()) == true)&&item!='noNeedKeyName'&&item!='photos'
           //其中noNeedKeyName:不要需要校验的keyName。photos:为图片的keyName
        })
        return errArr.length>0?true:photosList.length==0?true:false; 
    }

 <Button  type="primary" htmlType="submit" 
          disabled = {this.hasErrors()}
          onClick = {()=>{this.onSubmit()}}>
          提交
</Button>

您可能感兴趣的与本文相关的镜像