El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript avanzado: Expresiones regulares

Cómo identificar patrones para evaluar un correo electrónico

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende cómo integrar todos los tipos de evaluaciones de expresiones regulares para realizar la evaluación de un correo electrónico. Conoce en este capítulo cómo integrar tus evaluaciones con formularios en HTML y métodos de JavaScript.
09:18

Transcripción

Ha llegado el momento de mezclar todo lo que hemos aprendido, pero ahora, ya con un objetivo en específico e integrado con HTML. En este caso, tenemos nosotros un formulario donde simplemente vamos a escribir un correo electrónico, una contraseña y al pulsar el botón "Validar", esto va a validar las expresiones que nosotros hagamos. Si tú deseas utilizar esto para otra cosa, adelante. Simplemente copia y pega el código en donde más lo necesites. En este caso, este botón simplemente está generando un "console.log" donde dice que el botón ha sido pulsado. Como ves, es un formulario que nosotros tenemos conectado y que está diseñado con Bootstrap. Este formulario va a escuchar cuando se haga clic en el botón "submit", va a prevenir el comportamiento por default, es decir, el comportamiento por default manda a otra página. Vamos a cancelar ese comportamiento y ahorita estamos mandando a un "console.log". Este es el comportamiento actual de este formulario. Vamos evaluar el correo electrónico. Si bien existen muchas maneras de evaluarlo, siempre es recomendable acudir a la fuente que describe cómo funciona algo. En este caso, podemos acudir al RFC del correo electrónico, que podemos encontrar en esta dirección. Este RFC como tal es como el conjunto de buenas prácticas o el conjunto de especificaciones técnicas. Más que buenas prácticas, especificaciones técnicas, que van a servir para detallar el funcionamiento de algo en Internet. En este caso detallan cómo se va a componer y cómo va a funcionar un correo electrónico. Si tú deseas, puedes darle una ojeada, aunque es recomendable cuando quieres evaluar determinado tipo de cosas. Pero tú puedes buscar realmente en Internet una expresión regular que ya exista y de ahí partir. También tú puedes acceder al sitio "regular-expressions.info/email" y ver todas las variantes que existen para poder evaluar un correo electrónico. Si bien evaluar el correo electrónico podría parecer como que siempre es algo, pero llega a presentar algunas variantes, entonces tú puedes buscar el tipo de variante que necesites o generar tu propio patrón para evaluar un correo electrónico. En este caso, vamos a poner manos a la obra. Vamos a crear una función y dicha función vamos a ponerle de nombre: "isValidEmail" y lo que queremos con esta función es que realice la validación de correo electrónico y nos regrese un valor. Entonces, para este caso, vamos a conectarnos directamente al campo de correo electrónico que tiene una "id" llamada "email". Cuando yo la escribo, simplemente voy a asignar todo ese campo a esta variable. Es decir, estoy juntando el mundo de JavaScript con el mundo de HTML. Y a partir de que ya lo tengo, puedo ocupar sus valores. Ahora vamos a armar nuestro patrón. Para poder armar el patrón que nosotros queremos evaluar, vamos a escribir primero aquí un "return", para que nos regrese el valor que vamos a ocupar, y lo que va a regresar realmente va a ser una expresión regular, pero vamos a evaluarla y esta evaluación va a consistir en evaluar el correo electrónico, pero el valor. ¿Por qué? Porque si recordamos, trajimos todo el campo a guardarlo en la variable "email" y necesitamos acceder al valor que se escribe en el campo. Por eso mismo vamos a evaluar eso. Para comenzar, lo primero que haremos es definir al inicio de nuestra cadena de caracteres cualquier tipo de letra. Si recordamos, nosotros podemos ocupar "\W" para definir cualquier letra o número. Entonces a partir de aquí comenzamos y puede existir una o más repeticiones. Después de esto, podemos tener un agrupado. Con este agrupado, vamos a establecer si vamos a ocupar algún tipo de carácter. Por ejemplo, si yo quiero establecer un conjunto, vamos a poner aquí "\.", si quiero trabajar con el punto, "\+" si es un símbolo de más. Recuerden. Podemos tener distintos tipos de correo electrónico. Por ejemplo, mi nombre, símbolo de más, mi apellido. Varía dependiendo del proveedor. Así que de todos modos vamos a evaluarlo. O incluso, puede ser un guión. En todo caso, este es un grupo que puede aplicar para cualquiera. Es decir, el correo electrónico puede incluir cualquiera de estos símbolos. Y después de esto, un símbolo de interrogación, que significa que cualquiera de estos símbolos pueden o no estar presentes en la cadena. Después de esto, vamos a agregar que también puede o no existir cualquier tipo de carácter una o más veces. Con esto ya tengo una parte definida y simplemente como lo tengo agrupado en una subexpresión, vamos a indicar que puede o no estar, es decir, puede aplicar 0 o puede aplicar una o más veces. Con esto ya tenemos compuesta la primer parte del correo electrónico. Ahora viene la segunda, para la cual hay que ser muy específicos. En este caso es la letra "@", que es la parte, obviamente, donde se traza la mitad del correo electrónico. A esto después vamos a continuar con una subexpresión porque vamos a comenzar a evaluar el dominio. Y para evaluar el dominio podemos encontrar varias cosas. Primero que podemos estar haciendo uso de un conjunto donde encontremos un punto o podamos también encontrar un guión. Y esto puede o no estar presente. Seguido de esto también podemos encontrar cualquier carácter que pueda estar presente una o más veces. Y obviamente, como todo esto yo lo puedo definir dentro de un conjunto, vamos a establecerlo hasta acá, entonces voy a establecer que se repitan 0 o "n" cantidad de veces. Y ahora, solamente me hace falta la última expresión o el último bloque que es el final del dominio. Es decir, si es ".com", ".net", etc. Entonces vamos a recordar que esos comienzan con un punto. Y después del punto, recordemos que podemos tener cualquier letra o número, en este caso identificado por la letra "W" y vamos a definir un rango. Originalmente puede ser de tres, pero han estado cambiando los nombres de dominio, y las extensiones, etc. Entonces podemos dejar algún estándar donde vaya de dos a cuatro, porque si recordamos, hay algunos dominios como por ejemplo ".co", o tenemos algunos dominios largos, como ".info", entonces con esto podemos hacer esta evaluación. Y quiere decir que aquí al final, después de que nosotros tenemos ya esta expresión lista, podemos indicar que puede aparecer una o más veces, porque recordemos que en algunos casos, podemos tener correos como ".com.mx". Ahora una vez que ya tenemos expresado esto, simplemente vamos a indicar que este dominio va existir al final de toda cadena. Ya tenemos específico nuestra expresión regular. Como ves, una vez que estás acostumbrado a hablar en esta jerga, es decir, en este tipo de términos, utilizar y armar una expresión regular se vuelve un poco más habitual. Simplemente, en lugar de poner aquí el texto de "El botón ha sido pulsado", vamos a invocar a "isValidEmail". Pero para esto, vamos a poner un texto antes que me indique si el correo electrónico es o no válido para que tengamos una mejor referencia. Ahora sí, vamos a ocuparlo y actualizamos nuestro navegador. Escribamos un correo electrónico. Vamos a poner aquí "sergiobrito@gmail.com", validamos y ups, primero mandamos a imprimir toda la función. Me faltó agregar aquí los dos paréntesis para que esto se pueda ejecutar. Así que actualizamos nuevamente, pegamos y ejecutamos. Y ahora me dice: "¿El correo es válido?" y me regresa un valor "false". Probablemente haya escrito yo algo mal. Revisemos rápidamente. Regreso donde tengo puesta mi expresión regular y vemos que al inicio me faltó agregar una diagonal. Quiere decir que estaba esperando yo siempre una letra "W", pero no, lo que queremos expresar es que al inicio siempre debe de existir una letra o número. Así que ahora actualizamos nuevamente, vamos a pegar el correo electrónico, probamos y listo. Funciona. Ahora ¿qué sucede, por ejemplo, si yo quito la arroba? Vamos a validar. Esto me regresa a mí ya una validación, pero del formulario. Esto es gracias a HTML5, que ya incluye ciertas validaciones. Así que, por ahora, solamente para poder hacer las pruebas, vamos a quitar esto y vamos a poner, dentro del HTML, el tipo texto. Vamos a actualizar, probamos nuevamente sin la arroba y cuando pulsamos ya me regresa el tipo de correo electrónico y me indica que es falso porque está mal formado. De esta manera, ya logramos ahora evaluar un correo electrónico.

JavaScript avanzado: Expresiones regulares

Aprende a usar las expresiones regulares en JavaScript, ya que son un gran recurso en todo lenguaje, que te facilitará la creación de patrones o usar los ya prediseñados.

1:32 horas (23 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:5/12/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.