antd中form的重置校验

在Ant Design（antd）中，Form组件提供了resetFields方法用于重置表单校验状态。当我们需要重置表单校验时，可以调用Form组件的resetFields方法来清除表单的错误状态。

以下是使用Ant Design中Form组件进行重置校验的示例代码：

import { Form, Input, Button } from 'antd';

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

  const handleReset = () => {
    form.resetFields(); // 调用resetFields方法重置表单校验
  };

  return (
    <Form form={form}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username' }]}
      >
        <Input />
      </Form.Item>

      {/* 其他表单项 */}

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleReset}>Reset</Button> {/* 调用handleReset方法进行重置校验 */}
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的示例中，我们通过调用form.resetFields()方法来重置表单校验状态。当点击"Reset"按钮时，会调用handleReset方法，从而触发表单的重置校验操作。

需要注意的是，resetFields方法只会重置表单项的校验状态，不会清除表单项中的值。如果需要同时清除表单项的值，可以使用form.resetFields()方法传入一个空对象来实现：form.resetFields({ resetValues: true })。

希望以上信息能对你有所帮助！如有更多疑问，请继续提问。