react+antd系列之Form表单(2)：格式限制验证

最新推荐文章于 2025-05-13 14:35:48 发布

原创最新推荐文章于 2025-05-13 14:35:48 发布 · 1.6w 阅读

36 ·

CC 4.0 BY-SA版权

React+Antd系列专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍Antd中表单的各种输入验证方法，包括必填项检查、字符长度限制、自定义验证、空格检测及正则表达式验证，帮助开发者掌握Antd表单组件的高级用法。

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

格式限制

antd中表单的功能很多，下面就为大家整理了一下antd中常用的几种表单输入格式验证：

1. 输入框不能为空限制，如下：

  {getFieldDecorator('name', {
            rules: [{
            required: true,
            message: '名称不能为空',
          }],
         })(
      <Input placeholder="请输入名称" />
  )}

2. 输入框字符限制，如下：

字符长度范围限制：

   {getFieldDecorator('password', {
            rules: [{
              required: true,
              message: '密码不能为空',
            }, {
            min:4,
            message: '密码不能少于4个字符',
          }, {
            max:6,
            message: '密码不能大于6个字符',
          }],
         })(
        <Input placeholder="请输入密码" type="password"/>
   )}

字符长度限制：

  {getFieldDecorator('nickname', {
            rules: [{
            required: true,
            message: '昵称不能为空',
          }, {
            len: 4,
            message: '长度需4个字符',
          }],
         })(
       <Input placeholder="请输入昵称" />
  )}

3. 自定义校验

   {getFieldDecorator('passwordcomfire', {
            rules: [{
              required: true,
              message: '请再次输入密码',
            }, {
              validator: passwordValidator
          }],
         })(
            <Input placeholder="请输入密码" type="password"/>
   )}
   
     //  密码验证
  const passwordValidator = (rule, value, callback) => {
    const { getFieldValue } = form;
    if (value && value !== getFieldValue('password')) {
        callback('两次输入不一致！')
    }

    // 必须总是返回一个 callback，否则 validateFields 无法响应
    callback();
  }

validator属性自定义效验，必须返回一个callback

4.whitespace空格报错

  {getFieldDecorator('hobody', {
            rules: [{
              whitespace: true,
              message: '不能输入空格',
          } ],
         })(
            <Input placeholder="请输入昵称" />
  )}

若输入只有一个空格，则会报错

5.pattern正则验证

 {getFieldDecorator('qbc', {
            rules: [{
              message:'只能输入数字',
              pattern: /^[0-9]+$/
          } ],
         })(
            <Input placeholder="请输入ABC" />
)}

如果输入的不是数字，则提示错误

完整代码地址：
https://gitee.com/hope93/antd-form2