HOW - Form 表单确认校验两种模式（以 Modal 场景为例）

一、背景

基于react、antd form分别实现如下两种模式：

• 1、一个 Modal，点击确认进行校验提示
• 2、一个 Modal，确认按钮依赖于表单内容，必填项都有值才可点击

二、具体

以下是基于 React 和 Ant Design 的两种模式实现：

1. 模式一：点击确认进行校验提示

import React, { useState } from "react";
import { Modal, Form, Input, Button, message } from "antd";

const DialogWithValidation = () => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  const handleOk = () => {
    form
      .validateFields()
      .then(() => {
        message.success("校验通过，提交成功！");
        setVisible(false);
        form.resetFields();
      })
      .catch((errorInfo) => {
        message.error("校验未通过，请检查输入！");
      });
  };

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        打开对话框
      </Button>
      <Modal
        title="模式一：校验提示"
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleOk}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "请输入姓名！" }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: "请输入邮箱！" },
              { type: "email", message: "请输入有效的邮箱地址！" },
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default DialogWithValidation;

2. 模式二：确认按钮依赖于表单内容

可以参考 Antd form - 仅校验 例子。主要是利用 validateFields 的 validateOnly 动态调整提交按钮的 disabled 状态：

const SubmitButton: React.FC<React.PropsWithChildren<SubmitButtonProps>> = ({ form, children }) => {
  const [submittable, setSubmittable] = React.useState<boolean>(false);

  // Watch all values
  const values = Form.useWatch([], form);

  React.useEffect(() => {
    form
      .validateFields({ validateOnly: true })
      .then(() => setSubmittable(true))
      .catch(() => setSubmittable(false));
  }, [form, values]);

  return (
    <Button type="primary" htmlType="submit" disabled={!submittable}>
      {children}
    </Button>
  );
};

也可以监听 onFieldsChange：

import React, { useState } from "react";
import { Modal, Form, Input, Button } from "antd";

const DialogWithDisableButton = () => {
  const [visible, setVisible] = useState(false);
  const [isFormValid, setIsFormValid] = useState(false);
  const [form] = Form.useForm();

  const handleFieldsChange = () => {
    form
      .validateFields()
      .then(() => {
        setIsFormValid(true);
      })
      .catch(() => {
        setIsFormValid(false);
      });
  };

  const handleOk = () => {
    Modal.success({
      title: "提交成功",
      content: "所有必填项都已填写！",
    });
    setVisible(false);
    form.resetFields();
    setIsFormValid(false);
  };

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        打开对话框
      </Button>
      <Modal
        title="模式二：按钮依赖表单"
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleOk}
        okButtonProps={{ disabled: !isFormValid }}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
          onFieldsChange={handleFieldsChange}
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "请输入姓名！" }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: "请输入邮箱！" },
              { type: "email", message: "请输入有效的邮箱地址！" },
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default DialogWithDisableButton;

实现说明

1. 模式一：

   • 点击“确认”后会触发校验逻辑。
   • 校验通过后显示成功提示，否则提示错误信息。

2. 模式二：

   • 使用 onFieldsChange 方法监听表单变化。
   • 如果所有必填项都有值且校验通过，启用“确认”按钮；否则按钮保持禁用状态。