Ant Design 常见用法与坑点总结（三）：Input 内容去除前后空格

前言

Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。

因此，了解 Ant Design 的常见用法与坑点还是有必要的。

本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。

tip：文章使用的 4.x 版本的 Ant Design。

上一篇：Ant Design 常见用法与坑点总结（二）：Form 表单下拉框设置初始值

Input 输入框内容去除头尾空白

在填写 Form 表单时，我们往往会遇到这样的需求：Input 输入框输入的内容头尾不允许带有空格。有点类似于 trim() 方法的功能。

针对这个功能，整体上有3中实现思路：

• 在输入的过程中，禁止输入空白符
• 利用表单验证，如果头尾存在空格，则提示用户
• 提交表单时，自动去除头尾空白，用户无感

思路一：禁止输入空格

该方式利用 Form.Item 的 getValueFromEvent 属性，这个属性可以设置如何把输入的内容转换为表单项实际获取的值。需要传入一个函数。

<Form.Item
  name="city"
  label="城市"
  getValueFromEvent={(e) => e.target.value.replace(/(^\s*)|(\s*$)/g, '')}
  // getValueFromEvent={(e) => { console.log(e.target); return e.target.value; }}
>
  <Input />
</Form.Item>

在上述代码中，e.target.value 即为输入框输入的值，而 Form.Item 表单项实际获取到的值是 e.target.value.replace(/(^\s*)|(\s*$)/g, '')。

这种方法在页面交互上表现为用户无法输入空格，其实用户体验并不友好，让人感觉更像是这个输入框有 bug，竟然不让我输入空格。

思路二：利用表单验证

使用 第一篇文章 提到的表单验证方法。

<Form.Item
  name="city"
  label="城市"
  rules={[
    { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '前后不能有空格' }
  ]}
>
  <Input />
</Form.Item>

<Form.Item
  name="city"
  label="城市"
  rules={[
    {
      validator: (_, value) => {
        const reg = /(^\s+)|(\s+$)/;
        if(reg.test(value)) {
          return Promise.reject(new Error('前后不能有空格'));
        }
        return Promise.resolve();
      }
    }
  ]}
>
  <Input />
</Form.Item>

这里就体现出了自定义表单验证的优势，写法灵活，且在某些场景下能降低思考难度。/(^\s+)|(\s+$)/ 和 /(^\S)((.)*\S)?(\S*$)/ 这两个正则，显然前者更容易写出来，后面这个不查半天资料都难写。

思路三：提交表单调用 trim() 方法

这种方法就是随便用户输入，在提交表单的时候再使用 trim() 方法去除前后空格。

但是既然设置了这个规则，还是有必要让用户知道，给用户提示，因此综合下来第二种方法是比较推荐的解决办法。