reactjs - 如何在 react 中以antd形式添加自定义验证？

Question

我无法弄清楚如何以 antd 形式在 react 中添加自定义验证。验证器功能是否有效。请提出合适的方法。

<Form.Item
  label="Name"
  name="name"
  rules={[
    {
      required: true,
      message: 'The name is required.',
    },
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: 'Name can only include letters and numbers.',
    },
  ]}
>
  <Input />
</Form.Item>

Answer 1

在规则数组中，您可以通过定义异步验证器函数来定义自定义验证。

<Form>
  <Form.Item
    label="Name"
    name="name"
    rules={[
      {
        required: true,
        message: 'The name is required.',
      },
      {
        message: 'this is custom',
        validator: (_, value) => {
          if (/^[a-zA-Z0-9]+$/.test(value)) {
            return Promise.resolve();
          } else {
            return Promise.reject('Some message here');
          }
         }
       }
     ]}
  >
    <Input />
  </Form.Item>
</Form>