xumarhu.net xumarhu.net biblioteca
Principal > Biblioteca > Manuales > Validar un formulario con Expresiones Regulares en JavaScript

Validar un formulario con Expresiones Regulares en JavaScript

A continuación viene un ejemplo detallado de cómo validar un "Código Postal" usando expresiones regulares con JavaScript, utilizando un archivo separado y funciones.

Primero se definen las reglas de lo que se quiere validar, en este caso para un código postal se requiere lo siguiente:
  1. 5 caracteres exactamente
  2. Los caracteres permitidos son del 0 al 9
Por lo anterior requerimos validar un código postal que está entre 00000 a 99999.

El primer paso es generar nuestro esqueleto básico en HTML5 que llamaremos "login.htm":

Ahora agregamos nuestro formulario para preguntar el código postal:

Del código anterior podemos observar lo siguiente:

aceptado.htm
Es el código a donde enviaremos nuestros datos después de ser validados. Lo más común es que este archivo sea de tipo PHP ya que es posible que se utilicen accesos a bases de datos.

onsubmit="return validar_cp()"
Nos indica que cuando se envíe el formulario se ejecutará la función en JavaScript "validar_cp()". Y sólo se enviará la información cuando nuestra función nos regrese un valor verdadero (return true;).

required
Indica que este campo no puede enviarse vacío.

Ahora vamos a crear nuestra biblioteca de funciones JavaScript para validar nuestros formularios. Este archivo externo le llamaremos:
validar_expresiones.js

Para que nuestro formulario pueda leer este archivo, habrá que indicarle a nuestro programa "login.htm" el nombre y la ruta de nuestro archivo en la cabecera del código, por lo cual agregamos la siguiente línea:
<script src="validar_expresiones.js">

El código completo de "login.htm" queda de la siguiente manera:

Ahora vamos a crear nuestro archivo JavaScript que tendrá nuestra funciones de validación y que le llamaremos "validar_expresiones.js" y agregamos a este archivo el esqueleto de nuestra función "validar_cp()" y nos quedaría de la siguiente manera:

Ya dentro de nuestra función "validar_cp()" lo primero que hacemos es obtener el valor "cp" de nuestro formulario y la almacenamos en la variable "cadena". Esto lo hacemos agregando la siguiente línea:
var cadena = document.getElementById("cp").value;

Lo que sigue agregar es nuestra "Expresión Regular" que vamo a evaluar, en este caso queremos validar un "Código Postal" (con los requisitos que se colocaron al principio), por lo cual agregamos la siguiente línea:
var expresion_regular = /^[0-9]{5}$/;

Ahora comprobamos que nuestra "cadena" cumpla con los requisitos de la "expresion_regular" por lo que procederemos a validar de la siguiente manera (regresando un "true" si es correcta):

En caso de no cumplirse nuestra expresión regular (else), entonces procederemos a regresar un "false":

El código final del archivo "validar_expresiones.js" queda de la siguiente manera:

A nuestro archivo "validar_expresiones.js" se le pueden agregar mas funciones de validación sin necesidad de crear un nuevo archivo por cada función que vayamos necesitando (es como crear nuestra biblioteca de funciones).

Finalmente requerimos otra página donde se enviarán nuestros datos validados en caso de ser correctos, en este caso la página se llamará "aceptado.htm" y el código queda de la siguiente manera:

Para probar nuestro código solamente hay que abrir un navegador y carga el archivo "login.htm", el cual preguntará el "Código Postal", llamará a la función "validar_cp()", que es parte del archivo"validar_expresiones.js" para hacer la validación. En caso de pasar la validación llamará al archivo "aceptado.htm" para imprimir un mensaje de aceptado en la pantalla.


Principal > Biblioteca > Manuales > Validar un formulario con Expresiones Regulares en JavaScript
Portal de Tecnología desarrollado por: Rogelio Ferreira Escutia
Valid CSS Valid XHTML 5