React-antd-Form自定义正则校验

最新推荐文章于 2025-05-04 15:41:37 发布

救护用的垃圾车

最新推荐文章于 2025-05-04 15:41:37 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React Ant Design

本文链接：https://blog.youkuaiyun.com/DeepHugY/article/details/94391319

React 同时被 2 个专栏收录

2 篇文章

订阅专栏

Ant Design

2 篇文章

订阅专栏

本文介绍了如何在React应用中利用Ant Design（antd）的Form组件进行自定义正则验证。通过示例代码展示了在antd form中设置正则规则以确保输入数据的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天发现antd 的form校验还是很好用的，既支持使用已有的校验格式，又可以自定义正则校验，甚至还能灵活地自定义校验方法，这次主要是用到正则校验，以下是关键代码：

                <Form.Item
                  label="名称"
                >
                  {form.getFieldDecorator('name', {
                    rules: [
                      { required: true, message: '请输入名称' },
                      { max:20, message: '名称不超过20个字符' },
                      { pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") , message: '名称只允许包含数字、字母和下划线' }
                  ],
                  initialValue: currentCol.name
                  })(
                    <Input />
                  )}
                </Form.Item>