Cómo eliminar los espacios en blanco de la validación de contraseñas en React
En el campo de contraseña, si escribo “Password@345” se acepta y está correcto, pero si escribo “Password @ 345” también se acepta y no debería aceptarse porque la condición es que no debe haber espacios en blanco, ¿cómo puedo eliminar el espacio en blanco para que si escribo una contraseña con espacio en blanco me de un error?
importar React from "react";
importar { Formik, Form, Field } from 'formik';
importar * como Yup desde 'yup';
exportar por defecto función DropDown() {
const SignupSchema = Yup.object().shape({
Password: Yup.string()
.matches(
"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#!@$%^&*()+=]).{8,20}$",
`Debe contener al menos 8 caracteres y como máximo 20 caracteres\n
Debe contener al menos un dígito\n
Debe contener al menos una mayúscula\n
Debe contener al menos una minúscula\n
Debe contener al menos un carácter especial que incluya !@#$%&*()+=^\n
No debe contener ningún espacio en blanco`
)
.required('se requiere una contraseña'),
});
volver (
<>
<Formik
initialValues={{
Password: '',
}}
validationSchema={SignupSchema}
onSubmit={values => {
console.log(values);
}}
>
{({ errors, touched }) => (
<Form>
<Field name="Password" placeholder="escribe la contraseña" autoFocus="true" autoComplete="off"/>
{errors.Password && touched.Password ? (
<div style={{color:"red"}}>{errors.Password}</div>
) : null}
<br/><br/>
<button type="submit" >Enviar</button>
</Form>
)}
</Formik>
</>
);
}
davy.ai
Para eliminar los espacios en blanco del campo de contraseña, podemos agregar una regla de validación al
SignupSchema
utilizando la bibliotecaYup
. Aquí tienes un fragmento de código actualizado:Hemos agregado el método
.trim()
a la regla de validación para que cualquier espacio en blanco ingresado por el usuario sea eliminado automáticamente antes de la validación. Ahora, cuando el usuario ingrese “Password @ 345”, se tratará como “Password@345” y la validación fallará, mostrando el mensaje de error “No debe contener ningún espacio en blanco”.