如何手动实现form表单的校验

首先介绍一下我的技术栈，使用的是React+Antd，在进行开发的时候，使用到了Antd中的form表单来进行校验数据是否进行了填写，如图所示，除了当我输入以后又清空输入框内容后需要校验输入框不能为空以外，还需要在当我点击保存的时候也需要对表单进行校验，前者可以通过表单自带的功能进行校验，后者则需要我们手动进行实现

关键代码实现如下

const [form] = Form.useForm();

<Form form={form} layout="vertical">
  <Form.Item
    label="Copilot名称"
    name="copilotName"
    validateTrigger={["onChange", "onBlur"]}
    rules={[
      {
        required: true,
        message: "Copilot名称不能为空！",
      },
    ]}
  >
    <Input
      placeholder="请输入Copilot名称"
      className="input"
      value={addAllData?.name}
      onChange={e => {
        const value = e.target.value;
        updateKey("name", e.target.value);
        form.setFieldsValue({ copilotName: value });
        form.validateFields(["copilotName"]);
      }}
    />
    <div className="red-tip" />
  </Form.Item>
</Form>

const save = async () => {
  if (!copilotId) {
    try {
      await form.validateFields();
      let res = await addCopilot(addAllData);
      if (res?.status === 200) {
        message.success("添加成功");
        window.history.back();
      } else {
        message.error("添加失败");
      }
    } catch (error) {
      console.error("表单校验失败:", error);
    }
  } else {
    try {
      let res = await updateCopilot({ ...addAllData, id: copilotId });
      if (res.status === 200) {
        message.success("修改成功");
        window.history.back();
      }
    } catch (error) {
      console.log(error);
    }
  }
};

我们可以使用Form.useForm创建表单数据域进行控制，然后在表单失焦和修改的时候监听到input框对应的值，并且进行保存，最后在接口调用之前进行表单的数据的校验即可