Nextjs中的Ant设计验证器

Question

伙计们~这几天我开始尝试完成我的表单设计，但我现在遇到了一些问题，希望能在这里学到一些建议，在问之前我一直在寻找很多答案，但仍然不是我想要的。

这是我的问题~~

const [minLength, setMinLength] = useState('');
const [maxLength, setMaxLength] = useState('');
...
...
<Form.Item label='Length'>
<Form.Item
name='length'
noStyle
rules={[
{
validator: async (_, minLength, maxLength) => {
if (maxLength < minLength && maxLength !== (null || '')) {
return Promise.reject(
new Error('Min can not bigger than max!')
);
} else if (
minLength === (null || '') &&
maxLength !== (null || '')
) {
return Promise.reject(new Error('Please fill min first!'));
}
},
},
]}
>
<Input.Group compact>
<InputNumber
name='minLength'
style={{ width: 100, textAlign: 'center', borderRight: 0 }}
placeholder='Minimum'
value={minLength}
onChange={setMinLength}
/>
<Input
style={{
width: 30,
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
}}
placeholder='~'
disabled
/>
<InputNumber
name='maxLength'
style={{
width: 100,
borderLeft: 0,
textAlign: 'center',
}}
placeholder='Maximum'
value={maxLength}
onChange={setMaxLength}
/>
<span
style={{
position: 'relative',
margin: '0 8px',
top: '3px',
fontSize: '18px',
}}
>
吋
</span>
<Button
icon={<RedoOutlined />}
onClick={() => {
setMinLength('');
setMaxLength('');
}}
>
Reset
</Button>
</Input.Group>
</Form.Item>
</Form.Item>

验证器在这里不起作用，是我设置错了吗？？我想学习如何在我的其他输入或选择中自定义我自己的验证器，我知道Form中的使用规则。"require"或"pattern"的项目很常见，但我希望能在这里学到一些特别和新的东西~~

任何建议都会有帮助~~这对我来说意义重大！！感谢

Answer 1

查看validator函数的API参考。它们接受两个参数：规则本身和表单字段的当前值。照原样，你传递了三个论点，这毫无意义。

除此之外，您应该将每个Input组件封装在其自己的Form.Item中(而不是具有单个父组件(。您可以从文档中查看复杂表单控制示例，了解它是如何完成的。