react form的getFieldDecorator 特殊字符\/:*?"<>| 会禁止输入，并展示红字校验

在React的Ant Design库中的Form组件里，`getFieldDecorator` 是一个用于表单字段装饰的高阶组件，它可以帮助我们在验证过程中添加输入限制、显示错误提示等功能。如果你想要阻止用户输入特殊字符如 `\/*?:"<>|` 并在输入无效时显示红色的校验提示，可以结合`rules`选项来设置正则表达式校验。

例如：

import { Form, Input } from 'antd';

const { ValidateStatus, Help } = Form;

const rules = {
  input: [
    {
      type: 'regex',
      pattern: /^[^\s\/\*\?\"<>\|]+$/, // 使用正则表达式匹配非特殊字符
      message: '请输入只包含字母、数字和空格的字符', // 验证失败的提示信息
    },
  ],
};

<Form>
  <Form.Item
    name="input"
    rules={rules}
    label="输入框"
    hasFeedback // 设置为true表示显示验证状态
    validateStatus={(trigger) => (trigger === 'error' ? ValidateStatus.ERROR : '')} // 根据验证状态改变验证反馈样式
  >
    {({ getFieldDecorator }) =>
      <Input
        {...getFieldDecorator('input')}
        placeholder="请输入"
      />
    }
  </Form.Item>

  {this.state.errorMessage && (
    <Help description={this.state.errorMessage}>输入不符合要求</Help>
  )}
</Form>

当用户尝试输入包含特殊字符的值时，`validateStatus` 将变为 `ERROR` 并显示帮助文字提醒他们输入不合规。