Ant Design-仅当在字段外单击时才进行表单验证

import { Form, Input, Button } from 'antd';
import 'antd/dist/antd.css';

const MyForm = () => {
  const onFinish = (values) => {
    console.log('Received values from form: ', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const validateForm = (rule, value, callback) => {
    // 进行表单验证的逻辑判断
    if (value === 'example') {
      callback('This field cannot be "example"');
    } else {
      callback();
    }
  };

  return (
    <Form
      name="myForm"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        name="myField"
        label="My Field"
        rules={[
          { required: true, message: 'Please input a value' },
          { validator: validateForm },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<MyForm />, mountNode);