De TW

Este artículo ha sido reformateado automáticamente desde http://www.tejedoresdelweb.com/307/article-1066.html y su formato necesita ser revisado

Este artículo es bastante antiguo. Su contenido posiblemente está obsoleto y necesita ser actualizado.

Con JavaScript 1.2 el trabajo de validar formularios es más simple puesto que se provee de expresiones regulares. Mientras JavaScript 1.2 no sea más ampliamente extendido habrá que contentarse con validar como se muestra en el documento, en todo caso seguirá siendo un ejemplo interesante para aprender JavaScript.

¿ Para qué pre-validar formularios ?

Existen varios motivos que llevan a intentar mecanismos de pre-validación de datos en el lado del cliente:

• Permite simplificar la lógica de las aplicaciones en el lado del servidor, disminuyendo la labor de mantención de ellas y la carga del host.
• Es cómodo para el usuario que no dispone de un gran ancho de banda, puesto que así no necesita cargar una página para darse cuenta de que cometió un error.
• Además, es elegante.

¿ Cómo funciona ?

En el enfoque utilizado, la página Web comienza definiendo una biblioteca de útiles llamada FormCheq.js, (esta biblioteca es la simplificación de una biblioteca hecha por Eric Krock, de Netscape).

Una vez cargada esta biblioteca, se encuentran definidas una serie de funciones, las más importantes son las que siguen.

Funciones para evaluar el texto

La mayoría de las funciones están explicadas en la versión con comentarios de FormCheq.js.

isAlphabetic(string) Retorna verdadero si y solo sí el contenido de string sólo está compuesto por letras (mayúsculas o minúsculas, caracteres españoles incluídos)

isAlphanumeric(string) Retorna verdadero si y solo sí el contenido de string sólo está compuesto por letras (mayúsculas o minúsculas, caracteres españoles incluídos) o números

isName(string) Retorna verdadero si y solo sí el contenido de string sólo está compuesto por letras (mayúsculas o minúsculas, caracteres españoles incluídos), números o espacios en blanco

isInteger(string) Retorna verdadero si y solo sí el contenido de string representa un número entero, con o sin signo

isNumber(string) Retorna verdadero si y solo sí el contenido de string representa un número entero o decimal, con o sin signo

isEmail(string) Retorna verdadero si y solo sí el contenido de string tiene la forma de una dirección de correo electrónica válida

isPhoneNumber(string) Retorna verdadero si y solo sí el contenido de string tiene la forma de un número de teléfono válido (se aceptan números, paréntesis, guiones y espacios)

Manejo de texto dejado en blanco

Existe una variable global, llamada defaultEmptyOK, de tipo boolean, que indica si está bien o no que los campos de ingreso se encuentren vacíos.

Este comportamiento puede ser cambiado sobre la marcha pasando un segundo argumento opcional eok - empty OK a las funciones antes descritas.

Ejemplo: si defaultEmptyOk = true, entonces

isAlphabetic( "abc" ) = true

isAlphabetic( "abc", true ) = true

isAlphabetic( "abc", false ) = true

isAlphabetic( "" ) = true (defaultEmptyOK)

isAlphabetic( "", true ) = true

isAlphabetic( "", false ) = false

La función checkField()

La función checkField() es la función que se utiliza en definitiva para la validación del formulario. Su sintaxis es muy simple:

checkField( Referencia_al_campo_de_datos, Funcion_de_verificacion )

Por ejemplo: <input name=nombre onChange=checkField(this,isName)>

Esta función verifica el campo indicado, si está mal notifica al usuario, y pone el cursor en ese campo. El mensaje desplegado está en el código de la biblioteca de funciones usada.

Se puede utilizar una función cualquiera para verificar, lo importante es que si esta función retorna false, entonces se reclamará al usuario. También se encuentran disponibles dos parámetros opcionales, que indican si se tolera o no un campo vacío y cual es el mensaje a desplegar.

Por ejemplo: <input name=nombre onChange="checkField(this,isName,true,'ingrese su nombre, solo letras van aqui')">

Instrucciones de uso

Media:Formcheq_normal.txt -- Cambie el nombre a FormCheq.js

Media:Formcheq_comentada.txt -- Cambie el nombre a FormCheq.js; esta es una versión con comentarios.

Para utilizarlo en una página ponga lo siguiente en el encabezado de su página HTML:

<script language=javascript src=FormCheq.js></script>

Las constantes como mensajes y el defaultEmptyOK están definidas al comienzo del archivo.

También pruebe a comenzar con el ejemplo y luego modificarlo de acuerdo a sus necesidades. Nóte que para enviar un formulario el método es, en el caso del ejemplo: document.myform.submit(), esto debería reemplazar el alert("Todo verificado").

Para el lector avanzado

Entre las rutinas de FormCheq está incluída una llamada isNice que verifica que los campos no utilicen comillas simples o dobles, cuestión que generalmente resulta muy problemática cuando se trabaja con bases de datos.

Media:Javascript_verificar_rut_chileno.txt -- Funciones para verificar un RUT chileno, contribuidas por Ricardo Ojeda. (Nemesys-RT)