reactjs - Ant 设计 : input validation with Forms

Question

我需要使用 React 和 ant.design 在应用程序构建中进行输入验证。 正如我从 ant 文档中看到的，验证输入的方法是使用 Form 标签。

我想知道是否有任何方便的方法将 yup 与 ant.design 库集成 相同的验证结果，例如突出显示输入不正确的字段，并在其下方写入错误消息？

或者我只需要手动实现错误显示？

Answer 1

无需使用yup，antd 验证就足够了，只需使用具有名为 form 的 prop 的 Form 元素包装表单即可它从 useForm Hook 中获取值，并在 Form.Item 的 rules 属性中添加验证规则，该规则可以包装任何输入元素:

import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
....

const Demo = () => {
  const [form] = Form.useForm();

  
  return (
    <Form  form={form} >
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      .....
    </Form>
  );
};

更多详情请查看this