react+antd4.0版本自定义验证

朱雀 2022-11-14 07:57 127阅读 0赞

最近使用ract+antd4.0版本做表单验证，因为一个字段可能有多验证，如果都写在页面里显的很不优雅

看了很多博文看看有没有我想要的，结果没有 基本都是使用 **创建的 form 控制实例来实现做验证**

先上一张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70][]

乍看这张图一脸蒙，没头没尾，心里一万个。。。

我简单给大家做一下介绍 要想使用上述方式做自定义验证 首先使用 form.create()创建form实例

说明：如果不创建form控制实例 当你使用this.props.form会报错undefined

如果你是使用antd4.0版本的慎用以上方式 因为：form.create() 函数已被antd4.0废弃

如果使用上述的方式验证那就使用antd版本低于4.0

第一步：

const aaa =(form)=>{
    ...代码
    }
    const Aaaa = Form.create()(aaa);
    export default Aaaa

第二步：

![20210328114805353.png][]

第三：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 1][]

这里如果你是使用antd4.0 版本可以使用官网提供的验证规则

再有一种就是自定义验证单独创建一个验证文件：

第一步：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 2][]

第二步使用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 3][]

如果是多个验证一下如图：

![20210328120325793.png][]

有问题留言哈

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70]: /images/20221022/9223469e36ff47bd9d782ee7a15bf1a0.png
[20210328114805353.png]: https://img-blog.csdnimg.cn/20210328114805353.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210328122125277.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210328115532710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210328120143281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05pY2hvbGFzX2xvbmc=,size_16,color_FFFFFF,t_70
[20210328120325793.png]: https://img-blog.csdnimg.cn/20210328120325793.png