react antd form 表单校验 禁止输入\/ : * ? " < > | ,并展示红字校验

在React Ant Design的Form表单中，你可以使用`rules`属性来进行字段级别的校验。如果你想限制用户输入特定字符，并显示红色错误信息，你可以创建一个自定义规则函数。这里是一个示例，展示如何禁止用户输入`\/:*?"<>|,`字符，并在输入无效时显示红色提示：

首先，在你的表单组件内，引入`Form`、`Input`以及验证相关的`Form.Item`和`ErrorMessage`组件：

import { Form, Input, ErrorMessage } from 'antd';
import { useFormRules } from 'antd/form';

const forbiddenChars = '/:*?"<>|,';
const validateInput = (value) => forbiddenChars.includes(value) ? { required: true, message: '输入包含禁止字符，请勿使用', trigger: 'blur' } : undefined;

// ...

<Form>
  <Form.Item
    name="inputField"
    rules={[validateInput]}
  >
    <Input />
    <ErrorMessage message="必填或输入包含禁止字符" />
  </Form.Item>
</Form>

在这个例子中，我们定义了一个`validateInput`函数，当用户输入包含`forbiddenChars`列表内的字符时，返回一个校验对象，该对象指示这个字段是必需的，并且设置了错误消息。`trigger: 'blur'`意味着只有在失去焦点（即用户停止键入）时才触发校验。

当用户输入不符合规则时，`ErrorMessage`会显示对应的错误消息，文字颜色通常默认为红色。