Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 161
Visitas el mes pasado: 484
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En las páginas anteriores hemos visto ejemplos de expresiones regulares muy sencillas, buscamos normalmente letras, palabras o grupos de palabras, espacios en blanco, etc. Sin embargo la cosa se complica cuando lo que queremos comprobar es algo más complejo, tal como puede ser una dirección de correo, una direccion de página web, un número de teléfono, etc.
En estos casos buscar una expresión regular que se ajuste a estos formatos no es fácil, ya que dentro de un cierto patrón los formatos son variables. Normalmente suelen usarse en formularios, y lo que se trata de comprobar es que el usuario ha escrito realmente lo que se le pide.
Veamos cómo construir una expresión regular en la que comprobamos que el usuario ha escrito un e-mail en un formulario cuando se le pide.
Lo que realmente comprobamos es que el texto que ha escrito el usuario tiene una cierta estructura que coincide con la de un e-mail, es decir que tiene que tener una estructura como ésta:
micorreo@servidor.com
Donde los símbolos arroba "@" y el punto "." son obligatorios. tanto el texto "micorreo" como "servidor" pueden ser variables; el texto de después del punto ("com") puede ser variable con ciertas restricciones: siempre tiene que ir en minúscula, y además tener siempre dos o tres caracteres.
Eso en una expresión regular se traduce en lo siguiente:
/[\w]+@{1}[\w]+\.[a-z]{2,3}/
En primer lugar comprobamos que hay una cadena de texto;
[\w]+
detrás de ella debe estar el signo arroba una vez
@{1}
, después se escribe otra cadena de texto;
[\w]+
, despues tiene que haber escrito un punto \.
y por último el país u organización, el cual está siempre escrito en
letras minúsculas y con dos o tres letras: [a-z]{2,3}
.
Como lo que se trata es de comprobar que el texto escrito
coincida completamente con el e-mail, y no que éste esté dentro
de una cadena, deberemos poner los signos ^ $
al principio
y final de la expresión regular, por lo que ésta quedará de la siguiente
forma:
/^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
Para comprobar esta expresión regular rellena el siguiente campo de texto con un e-mail, y después pulsa en comprobar.
El código empleado para este script es el siguiente: En HTML tenemos el siguiente formulario:
<form action="#" name="formu1"> <p align="center"><input type="text" name="email" size="30" /> Escribe un e-mail</p><br/> <p align="center"><input type="button" onclick="comprueba()" value="Comprobar" /></p> </form>
Y el código javascript para la comprobación es la siguiente función:
function comprueba(){ tuEmail = document.formu1.email.value tuEmail = tuEmail.toString() patron = /^[\w]+@{1}[\w]+\.+[a-z]{2,3}$/ respuesta = patron.test(tuEmail) alert("resultado: "+respuesta) }
Comprobar una página web
Expresión regular para comprobar páginas web. El nombre de la página tiene que estar completo, es decir con el "http://" del principio.
patron = /^http[s]?:\/\/[\w]+([\.]+[\w]+)+$/
Se comprueba que la expresión empieza por "http://" o por "https://", y después que tiene dos o más cadenas de texto separadas por puntos.
Comprobar un nombre propio
En realidad comprobamos que el el nombre empieza por una letra mayúscula, y que los caracteres que le siguien son minúsculas y letras empleadas en español, y que no son números; en el patrón este esquema podemos repetirlo con un espacio en medio, con lo cual se pueden poner también nombres compuestos. La expresión es la siguiente:
/^([A-Z]{1}[a-zñáéíóú]+[\s]*)+$/
En realidad esta expresión tendría un pequeño fallo y es que no validaría nombres que empiecen por vocal si ésta va acentuada, por ejemplo "Ángel" o Úrsula, no lo validaría, y sí si lo escribimos "Angel" y "Ursula". por tanto haremos una pequeña corrección y la expresión regular quedará así:
/^([A-ZÁÉÍÓÚ]{1}[a-zñáéíóú]+[\s]*)+$/
Comprobar un número de teléfono de España
Se comprueba que el número tenga 9 cifras, y las cuales pueden ponerse todas seguidas o separadas por guiones en grupos: el primero de tres, y los demás de dos (admite los formatos "000000000", ó 000-00-00-00, también el 000-000000, pero no el 000-000-000). La expresión regular es la siguiente:
/^[\d]{3}[-]*([\d]{2}[-]*){2}[\d]{2}$/
Podemos ajustar más la comprobación si comprobamos también que la primera cifra sea un 9 ó un 6, ya que todos los teléfonos normales en España empiezan por esas cifras (fijos o móviles). La expresión regular ahora quedará así:
/^[9|6]{1}([\d]{2}[-]*){3}[\d]{2}$/
En la siguiente página de ejemplo vemos las expresiones regulares anteriores para comprobar los datos. Este es su código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ejemplos de Expresiones Regulares.</title> <style type="text/css"> #caja { border: 1px solid black; width: 450px; float: right; } </style> <script type="text/javascript"> window.onload = function() { //datos para escritura escribir = document.getElementById("caja"); si = "correcto"; no = "no es correcto"; } function correcto(valor) { // dar respuesta if (valor == true) { respuesta = si } else { respuesta = no } return respuesta; } function comprobar() { escribir.innerHTML = "Comprobación de datos: <br/> " //comprobar nombre nombre = document.formu.nombre.value; patronNombre = /^([A-ZÁÉÍÓÚ]{1}[a-zñáéíóú]+[\s]*)+$/; compNombre = patronNombre.test(nombre); correcto(compNombre); escribir.innerHTML += "Nombre : "+respuesta + "<br/>"; //comprobar teléfono telefono = document.formu.tel.value; patronTel = /^[9|6]{1}([\d]{2}[-]*){3}[\d]{2}$/; compTel = patronTel.test(telefono); correcto(compTel); escribir.innerHTML += "Teléfono: "+respuesta + "<br/>"; //comprobar correo correo = document.formu.email.value; patronEmail = /^[\w]+@{1}[\w]+\.+[a-z]{2,3}$/; compEmail = patronEmail.test(correo); correcto(compEmail); escribir.innerHTML += "E-mail : "+respuesta + "<br/>"; // comprobar página web pagina = document.formu.web.value; patronPag = /^http[s]?:\/\/[\w]+([\.]+[\w]+)+$/; compPag = patronPag.test(pagina); correcto(compPag); escribir.innerHTML += "Página Web: "+respuesta + "<br/>"; } </script> </head> <body> <h1>Comprobar datos de un formulario mediante expresiones regulares</h1> <div> <p id="caja">Comprobación de datos: </p> </div> <form action="#" name="formu"> <p><input type="text" name="nombre" size="40" /> Nombre </p> <p><input type="text" name="tel" /> Teléfono </p> <p><input type="text" name="email" size="40"/> Dirección e-mail </p> <p><input type="text" name="web" size="40"/> Página Web </p> <p><input type="button" value="Comprobar datos" onclick="comprobar()" /></p> </form> </body> </html>
Para ver esta página en tu navegador pulsa en el siguiente enlace:
Ejemplos de expresiones regulares.
El siguiente tema trata de cómo poder guardar las modificaciones que el usuario ha hecho en su página con javascript, es decir las cookies
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com