react antd form表单自定义校验

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

我是来写bug的吧

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

阅读量1.3k

点赞数

分类专栏： React 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/qq_55547532/article/details/121701755

版权

React 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Ant Design的Form.Item中使用validateTrigger='onBlur'实现路由地址输入框的实时验证，包括必填项验证和正则表达式校验。

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

  // validateTrigger='onBlur'仅在光标离开输入框时才做验证
 <Form.Item name="path" validateTrigger='onBlur' rules={[
          {
               required: true,
               label: "路由地址",
               message: '请输入路由地址'
          },
          {
               //在用户输入了内容后，再进行此项验证，所以要设为false
               required: false,        
               label: "路由地址",
               // 路由的正则表达式,可以替换要校验的正则表达式
               pattern: new RegExp("^(http|https)://", "i"),   
               message: '请输入正确的路由地址'
          }
    ]} 
 >
   <Input placeholder="请输入路由地址" />
 </Form.Item>