Instituto Tecnolgico Superior de San Martn Texmelucan

Programacin Web

Docente: L.C.C. Ivn Rafael Snchez Jurez

Prctica 6 Validacin de Prototipos Web

Grupo: 8 A

Integrantes: Ramrez Domnguez Ubaldo Jurez Flores Francisco Castillo Mungua Jos Benigno

22-Marzo-2014

Programacin Web [AEB-1055]

NDICE
1.- INTRODUCCIN. ....................................................................................................................... 3 2.- OBJETIVO. .................................................................................................................................. 4 3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR ....................................... 4 4.- COMPETENCIAS ESPECFICAS ........................................................................................... 4 5. RESULTADOS ............................................................................................................................. 4 6. CONCLUSIONES ...................................................................................................................... 13 7.- BIBLIOGRAFA ........................................................................................................................ 13

Fecha de Actualizacin 22/08/2013

Pgina 2

Programacin Web [AEB-1055]

Prctica

Validacin de Prototipos Web.

1.- INTRODUCCIN.
Una de las grandes aportaciones de JavaScript a la creacin de interfaces web es la posibilidad de acceder al contenido de los campos de los formularios para realizar acciones sobre los valores introducidos por el usuario, modificarlos y, en ltima instancia, validarlos. La validacin de los datos de un formulario mediante scripts JavaScript no sustituye a la validacin que debe realizarse, por motivos de seguridad, en la aplicacin del servidor que recibe la informacin. Sin embargo, al aadir una validacin local con JavaScript, la experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener slo un mensaje informando de la incorreccin de la informacin suministrada. Resulta frustrante cumplimentar un formulario, pulsar el botn enviar, y esperar 30 o 40 segundos para saber que hemos introducido mal un campo. JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para validar campos de formulario. Estas son algunas de las validaciones tpicas: Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.) Comprobar la validez (sintctica) de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la entrada

Fecha de Actualizacin 22/08/2013

Pgina 3

Programacin Web [AEB-1055]

2.- OBJETIVO.
Conocer el funcionamiento de JavaScript y aplicar este en el uso de formularios en pgina web usando el lenguaje de programacin ASP. NET y C#.

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR Sistema Operativo Procesador de Textos

Visual Studio.

4.- COMPETENCIAS ESPECFICAS

Organizar por equipos a los alumnos (3 integrantes mximo). Crear formularios en pginas web. Aplicar validacin de campo dentro de un formulario usando JavaScript

5. RESULTADOS
5.1. Crear un formulario usando la herramienta de Visual Studio, ir a archivo > nuevo proyecto > aplicacin ASP.NET Web Forms.

Figura1. Muestra la creacin de una aplicacin web.

Fecha de Actualizacin 22/08/2013 Pgina 4

Programacin Web [AEB-1055]

Se agrega un nuevo Formulario Web Forms (FWF)

Figura 2. Se muestra las opciones para agregar algn elemento.

Al agregar un nuevo FWF se tendr el siguiente campo de trabajo, se puede trabajar desde diseo o desde cdigo, en esta prctica se trabajara del lado del cdigo

Figura 3. Muestra el campo de trabajo del lado del cdigo.

Fecha de Actualizacin 22/08/2013

Pgina 5

Programacin Web [AEB-1055]

El formulario se creara dentro de body, se agregara un formulario y tendr como componentes campos de texto y un botn.

Figura 4. Muestra la creacin del formulario mediante cdigo.

Figura 5. Muestra el formulario realizado en la parte inferior.

Fecha de Actualizacin 22/08/2013

Pgina 6

Programacin Web [AEB-1055]

Iniciamos la aplicacin precionando la comvinacion de teclas Control+f5

Figura 6. Muestra la aplicacin web funcionando.

Se comenzara a realizar la validacin de los campos desde la parte del cdigo, encima del head, usando JavaScript. .

Figura 7. Creacin de la validacin de campos

Fecha de Actualizacin 22/08/2013 Pgina 7

Programacin Web [AEB-1055]

Se inicia la primer validacin del campo Nombre, la cual al presionar el botn Enviar en caso de que no se haya llenado, mandara un mensaje de notificacin hacia el usuario.

Figura 8. Codificacin de JavaScript para la validacin del campo Nombre-

Figura 9. Muestra la validacin del campo Nombre.

Fecha de Actualizacin 22/08/2013

Pgina 8

Programacin Web [AEB-1055]

Ahora se van a validar los otros dos campos (Apellidos y Correo).

Figura 10. Validacin de los tres campos (cdigo).

Figura 11. Validacin campo Apellidos

Fecha de Actualizacin 22/08/2013

Pgina 9

Programacin Web [AEB-1055]

Figura 12. Validacin campo Correo vaco.

Figura 13. Visualizacin de la validacin del campo Correo invlido.

Fecha de Actualizacin 22/08/2013

Pgina 10

Programacin Web [AEB-1055]

Existen diversos tipos de validacin, se mostr la validacin en caso de campos nulos (vacos) o en caso del Correo un campo invalido. Tambin se puede realizar la validacin que pida el dato faltante.

Figura 14. Validacin de llenado de campos.

Figura 15. Muestra la validacin de llenar un campo.

Fecha de Actualizacin 22/08/2013

Pgina 11

Programacin Web [AEB-1055]

Figura 16. Negacin de aceptacin del llenado de campo vaco.

Figura 17. Aceptar la notificacin del mensaje Campo vaco (Nota: se trabaj en el navegador Firefox y no logro apreciarse el mensaje para poder llenar dicho campo, en internet Explorer no dejo pasar a la siguiente ventana).

Fecha de Actualizacin 22/08/2013

Pgina 12

Programacin Web [AEB-1055]

6. CONCLUSIONES
La validacin de campos en un formulario son de gran importancia al momento de llenar cada campo, ya que de esa forma los datos dentro de un formulario sern correctos y la informacin ser clara. En caso de tener una base de datos se pueden evitar largos mensajes de error los cuales un usuario no podr entenderlos, y los datos no sern verdicos. Existen diversos tipos de validacin, lanzar un mensaje hacia el usuario notificando que el datos es invalido o est vaco, muestra una imagen en forma de negacin de datos (una cruz) o aceptacin de ellos (palomita) o aparece un mensaje a un lado o en la parte inferior del campo.

7.- BIBLIOGRAFA
1. Wikipedia, la enciclopedia libre. Formulario web. http://es.wikipedia.org/wiki/Formulario_web. [2014-03-22]. [En lnea]. Disponible en: en:

2. Libros Web. 7.3 Validacin. [En lnea]. http://librosweb.es/javascript/capitulo_7/validacion.html. [2014-03-22].

Disponible

3. Cursos de pginas web. JavaScript: Validar Formulario. [En lnea]. Disponible en: http://www.aulaclic.es/paginas-web/a_11_3_2.htm. [2014-03-22]. 4. El cdigo. Validacin de campos de formularios con JavaScript. [En lnea]. Disponible en: http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado13.html. [2014-03-22]. 5. Desarrollo web. Validacin de un formularios con JavaScript. [En lnea]. Disponible en: http://www.desarrolloweb.com/articulos/1767.php. [2014-03-22].

Fecha de Actualizacin 22/08/2013

Pgina 13