Reactjs 如何在此ant design登录表单中实现至少5个字符的验证？我找不到这些例子

我查看了ant.design表单的所有示例，但找不到文本框最小长度的验证。你能帮忙吗

从“antd”导入{表单、图标、输入、按钮、复选框}；
类NormalLoginForm扩展了React.Component{
handleSubmit=e=>{
e、 预防默认值（）；
this.props.form.validateFields（（错误，值）=>{
如果（！err）{
log（'接收到的值的形式：'，值）；
}
});
};
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'请输入您的用户名！'}]，
})(
,
)}
{getFieldDecorator（'密码'{
规则：[{required:true，消息：'请输入您的密码！'}]，
})(
,
)}
{getFieldDecorator（'记住'{
valuePropName:'已选中'，
initialValue:true，
})（记住我）}
登录
或
);
}
}
const WrappedNormalLoginForm=Form.create（{name:'normal_login'}）（NormalLoginForm）；
render（，mountNode）；

---

如何在此ant design登录表单中实现至少5个字符的验证？我找不到例子。

我从你的问题中了解到了什么。您需要限制文本框中的输入长度

因为您添加了这样的规则

 rules: [{ required: true, message: 'Please input your username!' }],

您需要添加更多这样的规则

rules: [
   { required: true, message: 'Please input your username!' },
   {validator: this.anyValidation}
 ],

 anyValidation = (rule, value, callback) => {
 const { form } = this.props;
 if (value.length > 5) {
  callback('Input exceed five characters limit');
 } else {
  callback();
 }
 };

---

您可以为输入添加更多规则：

<Form.Item>
      {getFieldDecorator('username', {
        rules: [
            { required: true, message: 'Please input your username!' },
            { min: 5, message: 'Username must be minimum 5 characters.' },
        ],
      })(
        <Input
          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
          placeholder="Username"
        />,
      )}
    </Form.Item>

{getFieldDecorator（'用户名'{
规则：[
{必需：true，消息：“请输入您的用户名！”}，
{min:5，消息：“用户名必须至少包含5个字符。”}，
],
})(
,
)}

有关其他验证规则，请访问。

---

希望这有帮助。

通过为输入指定最大长度，您可以限制输入字段中的字符。

---

您可以在这里查看-

validator: async (rule, value) => {
throw new Error('Something wrong!');
}

// or

validator(rule, value, callback) => {
try {
throw new Error('Something wrong!');
} catch (err) {
callback(err);
}
}

有关更多详情，请参阅：

我的版本-

<Form.Item
                label="test"
                name="test"
                className={"text-left"}
                rules={[{required: true, message: 'Please input 
test!'},
                    ({getFieldValue}) => ({
                        validator(_, value) {
                            if (getFieldValue('test').length < 3) {
                                return Promise.reject('Custom error 
message!');
                            }
                            return Promise.resolve();
                        },
                    }),
                ]}
            >
                <Input id="test" maxLength={80}/>
            </Form.Item>

({
验证器（\ ux，值）{
if（getFieldValue（'test'）。长度<3）{
返回承诺。拒绝（'自定义错误
讯息！）；
}
返回承诺。解决（）；
},
}),
]}
>

文本框的文档在这里：您在哪里发现可以使用“validator”添加自定义验证？您如何知道任何验证都有这3个参数？我问这个问题是因为我在antd v4文档中没有看到任何类似的例子。您可能读错了原始问题，他希望实现一个至少5个字符的要求，而不是最多5个字符

<Form.Item
                label="test"
                name="test"
                className={"text-left"}
                rules={[{required: true, message: 'Please input 
test!'},
                    ({getFieldValue}) => ({
                        validator(_, value) {
                            if (getFieldValue('test').length < 3) {
                                return Promise.reject('Custom error 
message!');
                            }
                            return Promise.resolve();
                        },
                    }),
                ]}
            >
                <Input id="test" maxLength={80}/>
            </Form.Item>