为了确保 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助手提供,问题来源于学员提问