-Go服务器开发

为了确保 rules 的错误消息不影响其他布局，您可以采用以下方法之一来设置样式，避免其撑大盒子。

方法一：使用绝对定位显示错误消息

通过使用绝对定位，可以将错误消息放置在输入框下方而不占据空间。下面是示例代码：

<Form.Item
    label="每单可选物品上限:"
    name="goodsLimit"
    validateTrigger="onBlur"
    rules={[
        { required: true, message: '请输入每单可选物品上限' },
        {
            validator: (_, value) => {
                if (!value || (value >= 1 && value <= 99)) {
                    return Promise.resolve();
                }
                return Promise.reject(new Error('请输入1～99之间的整数'));
            },
        },
    ]}
    labelCol={{ span: 24 }}
    wrapperCol={{ span: 24 }}
    style={{ position: 'relative' }} // 设置相对定位
>
    <Input className="header-left-input" type="number" placeholder="请输入1～99之间的整数" />
    
    {/* 自定义错误提示位置 */}
    <Form.ErrorList>
        {(errors) => errors.length > 0 && (
            <div style={{
                color: 'red',
                position: 'absolute',
                top: '100%', // 显示在输入框下方
                left: 0,
                marginTop: 5,
            }}>
                {errors[0].message}
            </div>
        )}
    </Form.ErrorList>
</Form.Item>

方法二：自定义样式和显示方式

您也可以选择隐藏原有的错误信息提示，并在验证失败时自己控制显示：

import React from 'react';
import { Form, Input } from 'antd';

const CustomForm = () => {
    const [form] = Form.useForm();

    return (
        <Form form={form} layout="vertical">
            <Form.Item
                label="每单可选物品上限:"
                name="goodsLimit"
                validateTrigger="onBlur"
                rules={[
                    { required: true, message: '' }, // 隐藏默认required提示
                    {
                        validator: (_, value) => {
                            if (!value || (value >= 1 && value <= 99)) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('')); // 同样隐藏默认提示
                        },
                    },
                ]}
                labelCol={{ span: 24 }}
                wrapperCol={{ span: 24 }}
            >
                <Input className="header-left-input" type="number" placeholder="请输入1～99之间的整数" />
            </Form.Item>

            {/* 自定义显示错误信息 */}
            <div style={{ color: 'red', marginTop: -10, height: '20px', display:'flex'}}>
               {form.getFieldError('goodsLimit').map((error, index) => (
                   <span key={index}>{error}</span>
               ))}
           </div>
        </Form>
    );
};

export default CustomForm;