reactjs - 如何在这个 ant design 登录表单中实现最少 5 个字符的验证?我找不到例子
问题描述
我查看了 ant.design 表单的所有示例,但找不到文本框最小长度的验证。你能帮忙吗?
https://ant.design/components/form/?locale=en-US#header
https://codesandbox.io/s/pww70x7y6q
import { Form, Icon, Input, Button, Checkbox } from 'antd';
class NormalLoginForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>,
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>,
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(<Checkbox>Remember me</Checkbox>)}
<a className="login-form-forgot" href="">
Forgot password
</a>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</Form.Item>
</Form>
);
}
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
ReactDOM.render(<WrappedNormalLoginForm />, mountNode);
如何在这个 ant design 登录表单中实现最少 5 个字符的验证?我找不到例子。
解决方案
您可以为您的输入添加更多规则:
<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>
有关其他验证规则,请访问此处。希望这可以帮助。
推荐阅读
- java - react-native-config:找不到符号
- c - 想了解如何配置STM32 CAN过滤器,需要什么计算
- php - Laravel FCM 推送通知更改默认声音
- c# - 调用 GetMemberAsync 时找不到操作
- python-3.x - RuntimeError:CUDA 错误:丢失函数触发的设备端断言
- firebase - Firestore查询和过滤排行榜如何做
- python - 文档 AI:google.api_core.exceptions.InvalidArgument:400 请求包含无效参数
- docker - Docker - 如何在我的容器化应用程序启动之前执行数据库 SQL 命令或外部非 docker 应用程序脚本?
- google-apps-script - 如何在 Google 工作表引用数据中保留超链接
- javascript - 如何更改对象数组中所有出现的对象键