Proyecto: JavaScript: expresiones regulares y el Modelo de Objetos de Documento (DOM)

Resumen

Aprender a manejar el DOM de una página web para manipular su contenido. Aprender a validar un formulario con el lenguaje de programación JavaScript y el empleo de expresiones regulares.

Contenido

  1. Objetivos
  2. ¿Qué tengo que hacer?
  3. ¿Cómo lo hago?
  4. Recomendaciones
  5. Recursos

Objetivos


¿Qué tengo que hacer?

En esta práctica tienes que emplear las expresiones regulares de JavaScript para validar el formulario de registro como nuevo usuario que has realizado en las prácticas anteriores (sustituye el código de validación implementado en la práctica anterior). En concreto, tienes que programar las siguientes restricciones:

Página con el formulario de registro como nuevo usuario
Contiene un formulario con los datos necesarios para registrarse (nombre de usuario, contraseña, repetir contraseña, dirección de email, sexo, fecha de nacimiento, ciudad y país de residencia, foto). Antes de enviar el formulario, debes realizar las siguientes comprobaciones:
  • nombre de usuario: sólo puede contener letras del alfabeto inglés (en mayúsculas y minúsculas) y números; longitud mínima 3 caracteres y máxima 15.
  • contraseña: sólo puede contener letras del alfabeto inglés (en mayúsculas y minúsculas), números y el subrayado; al menos debe contener una letra en mayúsculas, una letra en minúsculas y un número; longitud mínima 6 caracteres y máxima 15.
  • repetir contraseña: su valor debe coincidir con el escrito en el campo contraseña.
  • dirección de email: no puede estar vacío, hay que comprobar que cumple el patrón de una dirección de email (compuesto de cualquier carácter alfanumérico del alfabeto inglés, el subrayado, el guión y el punto; no permitir dominios principales de menos de 2 caracteres y más de 4 caracteres).
  • sexo: se debe elegir un valor.
  • fecha de nacimiento: comprobar que es una fecha válida.
  • El resto de campos no indicados se pueden quedar vacíos.

Importante: no siempre una expresión regular es la mejor solución. Debes de decidir en qué casos es mejor realizar una validación con una expresión regular y en qué casos es mejor realizarla "a mano".

Además, tienes que permitir que el usuario pueda ordenar, de forma ascendente y descendente, el listado resultado de una búsqueda de fotos por los campos título, fecha y país. El proceso de ordenación se tiene que realizar en la misma página mediante JavaScript, sin recargarla.


¿Cómo lo hago?

Una expresión regular es un patrón que define un conjunto de cadenas sin enumerar todos sus elementos. Una expresión regular está formada de caracteres y metacaracteres que tienen una función definida. La principal utilidad de las expresiones regulares es la de describir un conjunto de cadenas, lo que resulta de utilidad en editores de texto y aplicaciones para buscar y manipular texto. Además, otro uso es la validación de un formato específico en una cadena de caracteres dada, como por ejemplo fechas, correos electrónicos o identificadores.

En JavaScript existen dos formas de definir una expresión regular: mediante una cadena literal y mediante el constructor de objeto RegExp. Una expresión regular se puede aplicar a diferentes cadenas mediante expReg.test(cadena), que devuelve true si cadena cumple expReg y false en caso contrario.

Por ejemplo, en el siguiente código se comprueba si el usuario ha escrito correctamente una matrícula de automóvil que debe seguir el patrón código del país (1 o 2 letras), un espacio en blanco, numeración (4 dígitos), un espacio en blanco y letras (3 letras, empezando en BBB y acabando en ZZZ, sin las vocales):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function literal() { 
  var m = document.getElementById("matricula").value;
  var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;
  
  if(expreg.test(m))
	alert("La matrícula es correcta"); 
  else 
    alert("La matrícula NO es correcta"); 
} 

function objeto() { 
  var m = document.getElementById("matricula").value;
  var expreg = new RegExp("^[A-Z]{1,2}\\s\\d{4}\\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$");
  
  if(expreg.test(m))
    alert("La matrícula es correcta");
  else
    alert("La matrícula NO es correcta");
}
</script>
</head>
<body>
<form id="miForm" action="" method="get">
<p>
Matrícula: <input type="text" id="matricula" />
<br />
<input type="button" value="Literal" onclick="literal()" />
<input type="button" value="Objeto" onclick="objeto()" />
</p>
</form>
</body>
</html>

Al usar la expresión regular con el objeto RegExp, como se escribe dentro de una cadena es necesario escribir dos barras invertidas \\ para representar una barra invertida, ya que el carácter barra invertida se emplea para escapar los caracteres especiales. Cuando se emplea mediante una cadena literal no se debe escapar la barra invertida.

¿Qué significa cada elemento de la expresión regular de este ejemplo?

Con esta expresión regular podemos tener matrículas desde "A 1111 BBB" hasta "ZZ 9999 ZZZ". Por otro lado, el DOM es un API destinado a trabajar con documentos HTML y XML. El DOM proporciona una representación en forma de árbol de un documento y permite su manipulación (añadir un elemento nuevo, borrar un elemento, mover un elemento de sitio). Algunas funciones útiles del DOM:

El siguiente ejemplo muestra cómo se pueden añadir párrafos de texto nuevos a una página web con el texto que introduzca el usuario:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function nuevoTexto() {
  // Obtiene el div que tiene id="parrafos"
  var d = document.getElementById("parrafos");
  // Crea un nuevo elemento de tipo párrafo
  var np = document.createElement("p");

  // Inserta el texto en el contenido del nuevo párrafo
  np.textContent = document.getElementById("texto").value;
  // Añade el párrafo al final de los elementos que contenga el div
  d.appendChild(np);
  
  return false;
}
</script>
</head>
<body>
<form id="miForm" action="" method="get" onsubmit="return nuevoTexto()" >
<p>
Texto: <input type="text" id="texto" />
<br />
<input type="submit" value="Añade texto" />
</p>
</form>
<div id="parrafos">
<!-- Inicialmente vacío -->
</div>
</body>
</html>

Recomendaciones

Las expresiones regulares son un mecanismo de programación muy potente, pero esa potencia origina que sean complejas de utilizar. Comienza a trabajar con expresiones regulares sencillas y poco a poco intenta escribir expresiones más complejas.

Para ordenar los elementos de una lista puedes emplear diferentes algoritmos de ordenación. En la página The Art of Web: JavaScript puedes ver la implementación de los más conocidos: bubble sort, insertion sort, shell sort y quick sort.


Recursos

¿Qué son las expresiones regulares? ¿Cómo se emplean con JavaScript?

¿Qué es el DOM?

¿Cómo puedo explorar el DOM de una página web?