当前位置：首页 > news >正文

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

news 2025/7/10 11:42:46

一、背景

基于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><Modaltitle="模式一：校验提示"visible={visible}onCancel={() => setVisible(false)}onOk={handleOk}okText="确认"cancelText="取消"><Form form={form} layout="vertical"><Form.Itemlabel="姓名"name="name"rules={[{ required: true, message: "请输入姓名！" }]}><Input placeholder="请输入姓名" /></Form.Item><Form.Itemlabel="邮箱"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 valuesconst 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><Modaltitle="模式二：按钮依赖表单"visible={visible}onCancel={() => setVisible(false)}onOk={handleOk}okButtonProps={{ disabled: !isFormValid }}okText="确认"cancelText="取消"><Formform={form}layout="vertical"onFieldsChange={handleFieldsChange}><Form.Itemlabel="姓名"name="name"rules={[{ required: true, message: "请输入姓名！" }]}><Input placeholder="请输入姓名" /></Form.Item><Form.Itemlabel="邮箱"name="email"rules={[{ required: true, message: "请输入邮箱！" },{ type: "email", message: "请输入有效的邮箱地址！" },]}><Input placeholder="请输入邮箱" /></Form.Item></Form></Modal></>);
};export default DialogWithDisableButton;