AntD通过Form.Item的name和rules属性自动展示验证样式，如红边框和错误提示；2. 可用validateTrigger控制校验时机，onBlur减少干扰；3. 手动调用validateFields也能触发默认错误样式；4. 支持通过CSS微调样式，但应保持整体一致性。
在使用 Ant Design（AntD）时，表单验证的样式会自动由框架处理，你只需要正确配置表单规则和字段结构，AntD 就能根据校验状态展示相应的视觉反馈，比如错误提示文字、输入框变红边框等。
1. 使用 Form 和 Form.Item 自动触发验证样式
AntD 的 Form.Item 组件是实现验证样式的最关键部分。只要为它设置 red">name 和 rules 属性，当校验失败时，框架会自动添加错误样式。
示例代码：
import { Form, Input, Button } from 'antd';
const MyForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('提交的数据:', values);
};
return (
);
};当你未填写“用户名”并点击提交，或输入少于3个字符时，Input 框会出现红色边框，下方显示红色错误提示文字，这是 AntD 默认的验证样式行为。
立即学习“前端免费学习笔记（深入）”；
2. 实时校验与失焦触发
你可以通过调整 rules 中的 validateTrigger 控制何时触发表单校验，从而影响样式的显示时机。
常见配置：
- validateTrigger: 'onChange'：输入时实时校验
- validateTrigger: 'onBlur'：失去焦点时才校验（更常用）
示例：
这样用户在输入邮箱时不会频繁报错，提升体验，同时保留清晰的错误样式反馈。
3. 手动触发校验并查看样式变化
你可以通过调用 form.validateFields() 手动触发表单校验，适用于自定义按钮或复杂流程。
const handleCustomValidate = async () => {
try {
await form.validateFields();
// 校验通过
} catch (errorInfo) {
// 校验失败，AntD 会自动高亮错误字段
}
};即使手动触发，AntD 依然会正确渲染错误字段的红色边框和提示信息。
4. 自定义错误提示样式（可选）
虽然 AntD 提供了默认样式，但你也可以通过覆盖 CSS 来微调验证提示的外观。
/* 修改错误提示文字颜色 */
.ant-form-item-explain-error {
color: #f5222d;
font-size: 13px;
}
/* 修改输入框错误边框粗细 */
.ant-input-status-error {
border-color: #ff0000;
box-shadow: none;
}这类定制应在项目主题变量或全局样式中谨慎使用，避免破坏一致性。
基本上就这些。Ant Design 已经把表单验证样式封装得很完善，你只需写对 rules 和结构，视觉反馈就会自然生效，不需要手动控制 class 或状态。关键是理解 Form.Item 如何与校验机制联动。
