HTML dinámico: Procesado de Formularios

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML dinámico: Procesado de Formularios"

Alfredo Lucas San Segundo Roldán
hace 5 años
Vistas:

1 HTML dinámico: Procesado de Formularios Departamento de Lenguajes escuela técnica superior de ingeniería informática Versión original: Pablo Fernández (noviembre 2006) Tiempo: 2h Grupo de Ingeniería del Software Noviembre 2007 [Ángel US V7] Diseño: Amador Durán Toro ( )

2 Web vs. Aplicación Web Grupo de Ingeniería del Software 1

3 Hacia la Web 2.0 Grupo de Ingeniería del Software 2

4 HTTP TCP/IP SQL Cliente web Servidor de aplicaciones Servidor de datos Grupo de Ingeniería del Software 3

5 Formulario complejo Grupo de Ingeniería del Software 4

6 Tipos de Procesado Validación Permite comprobar que un valor introducido es valido para ser utilizado en la lógica de negocio. Activación Activar/Desactivar dinámicamente elementos en funcion de los valores introducidos por el usuario. Precarga Cargar dinámicamente distintas opciones en función de la elección del usuario. (Muy utilizado para select ) Grupo de Ingeniería del Software 5

7 HTTP TCP/IP SQL Cliente web Servidor de aplicaciones Servidor de datos Procesado en cliente Grupo de Ingeniería del Software 6

8 Ejecución del procesado Durante la introducción de los datos. Al cambiar ael valor de alguno de los controles Eventos: onchange, onclick, etc.. Al enviar el formulario. Al pulsar el botón para enviar al formulario. Evento: onsubmit Durante Al Enviar Validación Ok Ok Activación Precarga Ok Ok Grupo de Ingeniería del Software 7

9 Procesado durante la introducción: onchange Corresponde al evento que se lanza cuando el usuario cambia el valor del control. Se entiende que el valor se ha cambiado cuando el control pierde el foco <script type="text/javascript">  </script> <input id="dni" name="dni" type="text" onchange="procesadni()"/> Grupo de Ingeniería del Software 8

Procesado al enviar el formulario: onsubmit Se lanza cuando el usuario envía el formulario: al pulsar el botón al pulsar la tecla enter (Si no existe textarea) El envío puede ser cancelado desde

10 Procesado al enviar el formulario: onsubmit Se lanza cuando el usuario envía el formulario: al pulsar el botón al pulsar la tecla enter (Si no existe textarea) El envío puede ser cancelado desde javascript si ha habido algún error devolviendo "false". <script type="text/javascript">  </script> Ojo! <form onsubmit="return procesaformulario()"> </form>  Grupo de Ingeniería del Software 9

11 Validación Tipos Tiene un valor determinado. Tiene un patrón determinado. Pasos 1. Obtener Elemento 2. Obtener Valor 3. Comprobar 4. Mostrar Error Grupo de Ingeniería del Software 10

Validación: 1) Obtener el elemento A través del identificador A través del tipo de etiqueta Recorriendo el árbol DOM <body> <form> <input id="nombre" name="nombre" type="text"/> </form> </body>

12 Validación: 1) Obtener el elemento A través del identificador A través del tipo de etiqueta Recorriendo el árbol DOM <body> <form> <input id="nombre" name="nombre" type="text"/> </form> </body> <script type="text/javascript">  </script> 1. En este ejemplo no se tienen en cuenta los nodos Grupo de Ingeniería del Software debidos a los saltos de linea y espacios en blanco 11

Validación: 2) Obtener el valor Elementos de tipo text,select, textarea,radio Propiedad "value" <script type="text/javascript"> <!-- // Obtener el elemento "control" var valor = control.

13 Validación: 2) Obtener el valor Elementos de tipo text,select, textarea,radio Propiedad "value" <script type="text/javascript">  </script> Elementos de tipo checkbox Propiedad checked <script type="text/javascript">  </script> Grupo de Ingeniería del Software 12

// En la variable "email" tenemos el correo introducido por el usuario var patronemail=/^(.+)@(.

14 Validación: 3) Comprobar que es vacío que tiene un patrón (valor == "") (valor.length > 5) var reg = /ExpresionRegular/; (reg.test(valor)) <script type="text/javascript"> <! // En la variable " " tenemos el correo introducido por el usuario var patron =/^(.+)@(.+)$/; if(patron .test( ) == false){ // El patrón no coincide } //--> </script> Grupo de Ingeniería del Software 13

15 Validación: 4) Mostrar el error A. Mediante ventana emergente B. Mediante DOM <body> <form onsubmit="return procesa()"> <input id="nombre" name="nombre" type="text"/> </form> </body> <script type="text/javascript">  </script> Grupo de Ingeniería del Software 14

16 Validación: 4) Mostrar el error A. Mediante ventana emergente <script type="text/javascript">  </script> Grupo de Ingeniería del Software 15

Validación: 4) Mostrar el error B. Mediante DOM <script type="text/javascript"> <!-- function procesa(){ var ctrlnombre = document.getelementbyid("nombre"); var nombre = ctrlnombre.

17 Validación: 4) Mostrar el error B. Mediante DOM <script type="text/javascript">  </script> Posible alteración del estilo ctrlnombre.classname = "error"; input.error{ } background-color : red; Grupo de Ingeniería del Software 16

18 Otros Procesados Activaciones / Desactivaciones Mediante la propiedad disabled Cambiando el estilo Precarga Mediante DOM Otros control.disabled = true; control.style.visibility = hidden; Ejemplo: Comprobar la debilidad de un password Grupo de Ingeniería del Software 17

Documentos relacionados

escuela técnica superior de ingeniería informática

Versión original: Pablo Fernández (noviembre 2006) Actualización: P. Fernandez. Cambios menores en animaciones (Noviembre 2009) Tiempo: 2h escuela técnica superior de ingeniería informática HTML dinámico: