我想使用react和ant.design（antd）验证输入的密码

Question

我有两个字段，密码和验证密码。我想验证“验证密码”字段中输入的密码是否与密码字段中输入的密码相同。我正在使用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>

我知道有一个可以使用的验证器选项，但我不确定在这种情况下如何使用它。如果您需要更多信息，请与我们联系。

Answer 1

antd.design 网站有一个例子：

https://ant.design/components/form/#components-form-demo-register