JavaScript: Validação de Formulários. Prof. Ivanilton Polato

Transcrição

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) apos=value.indexof("@"); 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