在你提供的代码中，Form.Item 的 rules 校验是针对用户输入的，而 defaultValue 只在组件初始渲染时生效，不会触发校验。为了确保校验规则能够应用于 defaultValue，你可以考虑以下几种解决方案：
解决方案 1: 使用 initialValues
使用 Form 的 initialValues 属性来设置初始值，这样可以确保当表单被渲染时，校验规则能够生效。
<Form
initialValues={{ goodsLimit: editType === "single" ? singleEditRow?.goodsLimit : '' }}
>
<Form.Item
layout="vertical"
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 }}
>
<Input className="header-left-input" type="number" placeholder="请输入1～99之间的整数" />
</Form.Item>
</Form>
解决方案 2: 在表单提交时进行手动验证
如果需要在表单提交时验证当前字段，可以调用 Ant Design Form 提供的 validateFields() 方法。如下所示：
const handleSubmit = async () => {
try {
const values = await form.validateFields();
// 提交逻辑...
} catch (errorInfo) {
console.log('Failed:', errorInfo);
}
};
// 然后在你的按钮或事件中调用 handleSubmit()
解决方案 3: 自定义验证逻辑
如果你希望实现更复杂的验证逻辑，可以在 useEffect 中监听字段变化，并强制执行验证。
useEffect(() => {
form.setFieldsValue({ goodsLimit: editType === "single" ? singleEditRow?.goodsLimit : '' });
}, [editType, singleEditRow]);
// 在需要的时候调用 validateFields()
选择最适合你需求的方法来处理默认值和校验问题。希望这些建议对你有所帮助！
内容由零声教学AI助手提供，问题来源于学员提问
