Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

13. Expresiones regulares (III)

13.3 RegExp habituales.

Utilidad de las RegExp

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.

Comprobar un e-mail

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

Otros ejemplos:

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}$/

Ejemplo de comprobación con expresiones regulares:

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

Cookies

Página creada por ANYELGUTI.

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