reactjs - 我想使用 react 和 ant.design (antd) 验证输入的密码
问题描述
我有两个字段,密码和验证密码。我想验证在“验证密码”字段中输入的密码是否与在密码字段中输入的密码相同。我正在使用 antd 框架。这是我的代码片段。
<Row gutter={25} type="flex">
<Col xs={24} sm={12}>
<h4>Password</h4>
<FieldDecorator
form={this.props.form}
name={"Password"}
rules={[{ required: true, message: 'Please add a password' },
{ min: 8, message: 'Password must have a minimum length of 8' },
{
pattern: new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$'),
message: 'Password must contain at least one lowercase letter, uppercase letter, number, and special character'
}]}
>
<Input type="password" size="large" placeholder="********" />
</FieldDecorator>
</Col>
<Col xs={24} sm={12}>
<h4>Verify Password</h4>
<FieldDecorator
form={this.props.form}
name={"VerifyPassword"}
rules={[{ required: true, message: 'Please verify your password' }]}
>
<Input type="password" size="large" placeholder="********" />
</FieldDecorator>
</Col>
</Row>
我知道有一个可以使用的验证器选项,但我不确定在这种情况下如何使用它。如果您需要更多信息,请与我们联系。
解决方案
antd.design 网站上有一个例子:
https://ant.design/components/form/#components-form-demo-register
推荐阅读
- react-native - react-navigation中导航堆栈中的第一个屏幕
- java - 如何在Android中存储密钥对,即使应用程序卸载也应该持续存在?
- powershell - 使用 Powershell DSC 将视觉效果设置为“调整以获得最佳性能”
- javascript - 是否可以通过在事件队列上放置一个长时间运行的进程来挂起 Node.js?
- google-bigquery - 按日期时间 Google BigQuery 分区
- jquery - 引导程序 4 中轮播整页图像滑块和多 div 滑块的冲突
- pivot - 在 PowerQuery 中添加附加列
- scala - 如何将库文件夹添加到 Spark 的类路径
- ruby-on-rails - 在控制器规格中提供强大的参数
- excel - 根据条件分隔部分字符串