a-form-item校验非表单组件

a-form-item校验非表单组件是指在Ant Design的a-form组件中，使用a-form-item包裹非表单组件（如div、span等），并对其进行校验。这种方式可以方便地将非表单组件与表单组件一起校验，实现表单的完整性和正确性。

例如，可以在a-form-item中使用一个自定义的日期选择器组件，并对其进行日期格式校验：

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

const { RangePicker } = DatePicker;

const Demo = () => {
  const onFinish = (values) => {
    console.log(values);
  };

  const validateDate = (rule, value) => {
    if (value && !value[0]) {
      return Promise.reject('请选择开始日期');
    }
    if (value && !value[1]) {
      return Promise.reject('请选择结束日期');
    }
    if (value && value[0] > value[1]) {
      return Promise.reject('开始日期不能大于结束日期');
    }
    return Promise.resolve();
  };

  return (
    <Form name="demo-form" onFinish={onFinish}>
      <Form.Item name="date" label="选择日期" rules={[{ validator: validateDate }]}>
        <RangePicker />
      </Form.Item>
    </Form>
  );
};

在上面的例子中，我们使用了Ant Design的a-form组件，将一个自定义的日期选择器组件（RangePicker）包裹在a-form-item中，并对其进行日期格式校验。当选择的日期不符合校验规则时，会显示错误信息。这样就可以方便地将非表单组件与表单组件一起校验。