React 自定义表单校验规则

Posted 2021-11-06 张志翔ۤ

        最近项目中需要自定义表单的校验规则，特此记录便于日后查阅。

<Form.Item
  label="分类名称"
  name="name"
  rules={[
    {required: true, message: '请输入分类名称'},
    {
      validator: (_, value) => {
        return value.length > 20 ? Promise.reject('分类名称不能超过20个字符') : Promise.resolve();
      }
    },
  ]}
>
  <Input maxLength={20} placeholder="分类名称"/>
</Form.Item>

        直接使用 validator 就可以自定义校验规则了，其中value就是你输入框中的内容，reject就是校验不通过，resolve就是校验通过。

        到此React 自定义表单校验规则介绍完成。