JavaScript: Validação de Formulários. Prof. Ivanilton Polato - PDF
JavaScript: Validação de Formulários. Prof. Ivanilton Polato
Download "JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com"
Célia Penha Flores
1 JavaScript: Validação de Formulários Prof. Ivanilton Polato
2 Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir que as informações digitadas estão de acordo com o solicitado, a validação desonera o servidor deste serviço, uma vez que pode ser realizado no lado do cliente. 2
3 Mas, antes disso... Para que se valide um formulário é preciso conhecer as estruturas condicionais (ou de decisão, ou de seleção) Em JS, como em Java, são Condicional if Condicional if else Condicionais if else if else Condicional switch 3
4 Todos já sabem, mas... if (condição) código executado quando a condição é verdadeira ////////////////////////////////////////////////// if (condição) código executado quando a condição é verdadeira else código executado quando a condição é falsa 4
5 Todos continuam sabendo, mas... switch(n) case 1: executa este bloco quando n == 1 break; case 2: executa este bloco quando n == 2 break; default: executa este bloco quando nenhuma das condições anteriores foi atendida 5
6 Validar o que? O que verificar em um formulário? Basicamente se o usuário: Deixou campos sem preencher? Digitou um válido? Entrou com uma data válida? Digitou texto em um campo numérico? Mas qualquer outro campo pode ser verificado também... 6
7 Exemplo Um exemplo para campos obrigatórios: function valida_requeridos(campo,texto) with (campo) if (value==null value=="") alert(texto); return false; else return true; 7
8 Exemplo 2 Um exemplo para validar function valida_ (campo,texto) with (campo) dotpos=value.lastindexof("."); if (apos<1 dotpos-apos<2) alert(texto); return false; else return true; 8
9 Veja bem... Ambas as validações foram feitas por meio do evento do formulário a seguir:» onsubmit="return valida_form(this)" A função valida_form nada mais faz do que chamar as funções de validação e em caso de erro coloca o foco no campo validado. Este é um mecanismo de validação. 9
10 valida_form(formulario) function valida_form(formulario) with (formulario) if (valida_requeridos( ," deve ser preenchido!")==false) .focus(); return false; 10
11 Outro mecanismo A validação ainda pode ser feita de outras maneiras como, por exemplo, campo a campo. Desta forma podemos nos aproveitar de outros eventos da linguagem JS, vistos no próximo slide. 11
12 Eventos JS São fatos que ocorrem durante a execução do sistema, a partir dos quais o programador pode definir ações a serem realizadas pelo programa. onload: Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento. onunload: Ocorre na descarga (saída) do documento. Também só ocorre no BODY. onchange: Ocorre quando o objeto perde o foco e houve mudança de conteúdo. válido para os objetos Text, Select e Textarea. onblur: Ocorre quando o objeto perde o foco, independente de ter havido mudança. válido para os objetos Text, Select e Textarea. onfocus: Ocorre quando o objeto recebe o foco. válido para os objetos Text, Select e Textarea. 12
13 Eventos JS onclick: Ocorre quando o objeto recebe um Click do Mouse. válido para os objetos Button, Checkbox, Radio, Link, Reset e Submit. ondblclick: Botão esquerdo do mouse é pressionado duas vezes no elemento onkeypressed: Tecla é pressionada e solta. Pressionar uma tecla por alguns instantes aciona multiplos eventos. onkeydown: Tecla é pressionada, acionando um evento. onkeyup: Tecla é solta. 13
14 Eventos JS onmouseover: Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link. onmouseout: Ponteiro do mouse é movido para fora do elemento onmousedown: Botão do mouse é pressionado dentro do elemento onmouseup: Botão do mouse é liberado dentro do elemento onmousemove: Ponteiro do mouse é movido dentro do elemento onselect: Ocorre quando o objeto é selecionado. válido para os objetos Text e Textarea. onsubmit: Ocorre quando um botão tipo Submit recebe um click do mouse. válido apenas para o Form. 14
15 Exemplos com onblur Converte caracteres digitados com letras minúsculas para letras maiúsculas. <input name=nome size=50 maxlength=50 onblur='value=value.touppercase();'> Converte caracteres digitados com letras maiúsculas para letras minúsculas. <input name= size=50 maxlength=50 onblur='value=value.tolowercase();'> 15
16 Exemplos com onload <html> <head> <script type="text/javascript"> function mymessage() alert("spfc: O ÚNICO Hexa!!!"); </script> </head> <body onload="mymessage()"> </body> </html> 16
17 Exemplos com onchange <html> <head> <script type="text/javascript"> function preferedbrowser() prefer=document.forms[0].browsers.value; alert("voce prefere navegar com o browser: " + prefer); </script> </head> <body> <form> Escolha o seu browser preferido: <select id="browsers" onchange="preferedbrowser()"> <option value="internet Explorer">Internet Explorer <option value="firefox">firefox </select> </form> </body> </html> 17
18 Validando sexo... <script> function validasexo(sexo) var sexo = sexo.touppercase(); if(sexo!='m'&&sexo!='f') alert("sexo inválido, use M ou F"); return ""; return sexo; </script> E lá no <form> do <html>: Sexo:<INPUT NAME=sexo size=1 maxlength=1 onblur='value=validasexo(value);'> 18
19 Arrays NomeDia = Array(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia[2] = "Terça" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sabado" var diasemana = NomeDia[3]; alert(diasemana); 19
20 Strings string.length - retorna o tamanho da string string.charat(posição) - retorna o caracter da posição especificada string.indexof("string") - retorna o número da posição onde começa a primeira "string" string.lastindexof("string") - retorna o número da posição onde começa a última "string" string.substring(inicio, fim) - retorna o conteúdo da string que corresponde ao intervalo especificado. 20
21 Datas getdate() - Obtém o dia do mês (1 a 31) getday() - Obtém o dia da semana (0 a 6) getmonth() - Obtém o mês (0 a 11) getyear() - Obtém o ano gethours() - Obtém a hora (0 a 23) getminutes() - Obtém os minutos (0 a 59) getseconds() - Obtém os segundos (0 a 59) Exemplos: DataToday = new Date() ; DiaHoje = DataToday.getDay() ; 21
22 Caixas de Diálogo O objeto window de JavaScript tem três métodos para interagir com o usuário: Método Alert <input type= button onclick= window.alert('exemplo de alerta') > Método Confirm <input type= button onclick= window.confirm('continuar?') > Método Prompt <input type= button onclick= window.prompt('digite seu nome', 'Zé') > 22
23 Conversões tostring() Converte o objeto para uma string. isnan(value) Verifica se value não um número if (isnan(string1)) document.write("string1 não é um número\n"); parsefloat() Transforma um número ou uma string em float. value1 = parsefloat("123"); value2 = parsefloat("9.683"); parseint() Converte uma string em integer ou retorna o primeiro inteiro encontrado na string. value1 = parseint("12b13"), Se nenhum inteiro for encontrado, é retornado 0 23
24 Dúvidas??? Prof. Ivanilton Polato
UENF Curso de Javascript Prof. Sérgio Rodrigues Pg 1 ÍNDICE
UENF Curso de Javascript Prof. Sérgio Rodrigues Pg 1 ÍNDICE Javascript - Módulo I 02 Introdução 02 Escrevendo no documento 02 Criando variáveis 03 Mensagens 04 Alerta 04 Confirmação 04 Receptor 05 Operadores
Apostila sobre Java Script
Apostila sobre Java Script 1 Java Script Básico... 3 1. Introdução... 3 1.1 O que é Java Script?... 3 1.2 Qual é a diferença entre Java e JavaScript?... 3 1.3 Um pequeno exemplo do uso de scripts... 4
Programação para Internet I. 8. JavaScript. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
Programação para Internet I 8. JavaScript Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Trata-se de uma linguagem de programação bastante completa! No entanto, é geralmente conhecida como linguagem
PROF. DANIELA PIRES Aplicações para Web 1 *JavaScript * Validação de Formulários * HTML Dinâmico 2 *Linguagem de scripting * orientada para objeto * interpretada pelo browser *versão atual: 1.3 (para IE)
Introdução à Tecnologia Web JavaScript Objetos: Propriedades e Métodos Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Objetos: Propriedades e Métodos Índice 1 Objetos JavaScript... 3 a)
APOSTILA DE JAVA SCRIPT
APOSTILA DE JAVA Introdução Operadores lógicos Operadores matemáticos Controles especiais Controles condicionais Eventos Criando variáveis Escrevendo no documento Mensagens Criando funções Funções intrinsecas
Roteiro. Desenvolvimento de Aplicações Web. JavaScript. Script. Script
Roteiro Desenvolvimento de Aplicações Web JavaScript Roberto Vedoato vedoato@joinville.udesc.br Introdução Conceitos Usos Formas de inserção Sintaxe Variáveis Tipos de dados e literais Identificadores
APRENDENDO JAVASCRIPT, UMA LÓGICA PARA WEB. Por André Marinho C. O QUE É JAVASCRIPT?
APRENDENDO JAVASCRIPT, UMA LÓGICA PARA WEB. Por André Marinho C. O QUE É JAVASCRIPT? JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas
Linguagem Javascript. Referências. Capacidades de Javascript. O que é JavaScript? Tipos de JavaScript. Versões de Javascript
Linguagem Javascript João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3214 Fax. (021) 2 270-8554 e-mail: joao@nce.ufrj.br Slides originais: Maurício Bomfim Referências Bibliográficas:
Introdução à Linguagem JavaScript. Rodolfo Riyoei Goya
Introdução à Linguagem JavaScript Rodolfo Riyoei Goya 1 Índice 1 Índice... 2 2 Introdução... 4 2.1 Pré-requisitos... 4 2.2 Como funciona um script em JavaScript... 4 2.3 Um script simples em JavaScript...
ALGUMAS CONSIDERAÇÕES JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,
Introdução ao Javascript. Parte 3 Prof. Victor Hugo Lopes
Introdução ao Javascript Parte 3 Prof. Victor Hugo Lopes agenda Trabalhando com Eventos DOM na prática: trabalhando com propriedades http://goo.gl/tkjhmb Eventos Evento é um acontecimento que ocorre a
(c) 1997 Luis Carlos de Andrade Rodrigues. dricci@uninet.com.br Todos direitos reservados.
(c) 1997 Luis Carlos de Andrade Rodrigues. dricci@uninet.com.br Todos direitos reservados. Manual JavaScript Operadores Matemáticos São operadores a serem utilizados em cálculos, referências de indexadores
Construção de Sites Aula 6
Construção de Sites Aula 6 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 17 de Agosto de 2010 Indice 1 Eventos onload e onunload 2 3
Controle de tipos; classes; formulários; eventos; validações.
Disciplina: Autoria Web AULA 14 Controle de tipos; classes; formulários; eventos; validações. Adaptado do professor Bruno Gomes, IFRN Edmilson Campos, Prof. MsC. http://edmilsoncampos.net edmilson.campos@ifrn.edu.br
Tutorial JavaScript. Índice: Por: Izaias Lisboa ultima revisão: 13/02/2001 http://www.codefactory.com.br
Tutorial JavaScript Por: Izaias Lisboa ultima revisão: 13/02/2001 http://www.codefactory.com.br Índice: Tópico Página O que é JavaScript 2 Quais browsers suportam JavaScript 2 Iniciando 2 A tag Script
Linguagem Javascript. Referências. Aula 1. O que é JavaScript? Capacidades de Javascript. Tipos de JavaScript
Referências Linguagem Javascript João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3214 Fax. (021) 2270-8554 e-mail: joao@nce.ufrj.br Slides originais: Maurício Bomfim Bibliográficas:
Programação WEB I Funções
Programação WEB I Funções Funções As funções podem ser definidas como um conjunto de instruções, agrupadas para executar uma determinada tarefa. Dentro de uma função pode existir uma chamada a outra função.
Os componentes HTML possuem a capacidade de configurar eventos
Javascripts (JS) Eventos no HTML Os componentes HTML possuem a capacidade de configurar eventos Estes eventos são tratados por um código específico, criado pelo programador, em funções javascript Alguns
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JAVASCRIPT
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JAVASCRIPT Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar a natureza da linguagem JavaScript Apresentar o JavaScript com ferramenta de manipulação de