Form表单（antd-design组件库）简单使用以及单一检查规则

短命女 2023-10-12 10:59 15阅读 0赞

## **1.****Form表单** ##

高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

## **2.****何时使用** ##

·用于创建一个实体或收集信息。

·需要对输入的数据类型进行校验时。

组件代码来自： [表单 Form - Ant Design][Form - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【react项目+antd组件-demo:hello-world [react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [表单 Form - Ant Design][Form - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

## **4.****本地验证Form的基本使用** ##

复制下图所示代码，了解Form的一些基本使用格式

![acbe655adee34aa2919fd178887f6ca5.png][]

## **5.****在上一步的基础上再增加****2****个校验规则，在rules中增加下述****2****行代码，即可增加****2****个校验规则** ##

{ pattern: /^[a-zA-Z0-9_]+$/, message: '提示1：账号必须是英文、数字或者下划线组成' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '提示2：账号必须是英文、数字或者下划线组成' },

在Username中输入字符--，效果图如下：

![904de5f22dbe4a4b8bdd622722f82fcb.png][]

## **6.如何实现当某一规则校验不通过时，停止剩下的规则的校验?** ##

只需要在rules前加入下述一行代码即可

validateFirst={true}

在Username中输入字符--，效果图如下：

![a9e4de0935dc40ce8e704e91ec4c7712.png][]

本文仅介绍了组件Form的部分内容，更多内容请参阅官方文档： [表单 Form - Ant Design][Form - Ant Design]

[Form - Ant Design]: https://ant.design/components/form-cn#components-form-demo-basic
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[acbe655adee34aa2919fd178887f6ca5.png]: https://img-blog.csdnimg.cn/acbe655adee34aa2919fd178887f6ca5.png
[904de5f22dbe4a4b8bdd622722f82fcb.png]: https://img-blog.csdnimg.cn/904de5f22dbe4a4b8bdd622722f82fcb.png
[a9e4de0935dc40ce8e704e91ec4c7712.png]: https://img-blog.csdnimg.cn/a9e4de0935dc40ce8e704e91ec4c7712.png