Búsqueda de sitios web

reactjs - Quiero verificar la contraseña ingresada usando react y ant.design (antd)


Tengo dos campos, contraseña y verificar contraseña. Me gustaría validar que la contraseña escrita en el campo "verificar contraseña" sea la misma que la ingresada en el campo de contraseña. Estoy usando el marco antd. Aquí está mi fragmento de código.

 <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>

Sé que hay una opción de validador que puedo usar, pero no estoy seguro de cómo usarla en este caso. Avísame si necesitas más información.

Respuesta #1

hay un ejemplo en el sitio antd.design:

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

Artículos relacionados