ZBLOG

为了确保 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;

总结

通过这两种方式,可以有效防止错误提示撑大表单项,从而影响整个布局。在实现时,您可以根据需求选择合适的方法来调整效果。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19114

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?