Validar un formulario antes de enviarlo es muy importante. Con esto te evitas de estar lidiando con información incorrecta en el back. Afortunadamente Javascript permite hacer estas validaciones usando expresiones regulares.

Expresiones Regulares

Las expresiones regulares son un conjunto de reglas que permiten validar que una cadena de texto cumpla con ciertos criterios. Éstas validaciones se pueden aplicar a correos, contraseñas, direcciones IPs, etc.

Las expresiones regulares tienen un formato particular. A continuación un ejemplo de una expresión regular para validar si un correo está correcto:

/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g

No entraremos en detalles de cómo construir una expresión regular si no que nos enfocaremos en cómo utilizarla. No te preocupes que también te indicaré de donde puedes conseguir expresiones regulares para validar casi todo.

¿Cómo utilizar una expresión regular?

Una vez que ya tenemos lista la expresión que queremos utilizar, su uso en Javascript sería el siguiente:

1️⃣ Primero almacenamos la expresión regular en una constante. Esto en realidad crea un objeto con sus propios métodos.

const regExp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;

2️⃣ Segundo utilizamos el método test, el mismo que nos arrojará un true si la validación fue correcta, o un false si no lo fue.

regExp.test(email)

3️⃣ Tercero usamos un bloque if con el condicional anterior para hacer determinada acción si la validación fue correcta o no.

if(regExp.test(email)){
        // código en caso de que sea correcta la validación
    }else{
        // código en caso de que sea incorrecta
    }

Todo esto lo explico más a detalle en el siguiente video, aquí también podrás ver donde conseguir más expresiones regulares 👇

Y si quieres ver esta validación aplicada a un ejemplo práctico, lo puedes ver en el siguiente video 👇👇

Y si estas empezando en el mundo del desarrollo web, seguramente te va a interesar este otro post de aquí.

Si te gustó este contenido, también puedes seguirme en mis redes sociales:

👉‍‍ YouTube
👉‍‍TikTok
👉‍‍ Twitter
👉‍‍ GitHub