JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com
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
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
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
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
Validar o que? O que verificar em um formulário? Basicamente se o usuário: Deixou campos sem preencher? Digitou um email 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
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
Exemplo 2 Um exemplo para validar email: function valida_email(campo,texto) with (campo) apos=value.indexof("@"); dotpos=value.lastindexof("."); if (apos<1 dotpos-apos<2) alert(texto); return false; else return true; 8
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
valida_form(formulario) function valida_form(formulario) with (formulario) if (valida_requeridos(email,"email deve ser preenchido!")==false) email.focus(); return false; 10
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
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
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
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
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=email size=50 maxlength=50 onblur='value=value.tolowercase();'> 15
Exemplos com onload <html> <head> <script type="text/javascript"> function mymessage() alert("spfc: O ÚNICO Hexa!!!"); </script> </head> <body onload="mymessage()"> </body> </html> 16
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
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
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
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
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
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
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
Dúvidas??? Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com