Java script aula 08 - formulários

839 visualizações

Publicada em

Java script aula 08 - formulários

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
839
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
81
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Java script aula 08 - formulários

  1. 1. Formulários Cristiano Pires Martins Fonte: JavaScript - Guia do Programador - Maujor 1
  2. 2. Introdução Peças de composição de uma página presentes em praticamente todos os web sites; Interface de coleta de dados, mesmo apenas para busca; São interativos; O desenvolvedor não deve supor que o usuário digitará apenas o que se espera. 2
  3. 3. Fundamentos Primeiro fundamento do uso de JavaScript com formulários: validar campos; Mas ações não devem apenas no cliente, tem que ser desenvolvida no lado do servidor; O elemento <form></form> é o container de todos os controles (campos) de um formulário. 3
  4. 4. Elemento form<form  action="http://www.cpmart.eng.br" id="fdemo" method="get"></form> O elemento form admite os atributos: action: aponta para o endereço em que se encontra o programa destinado a processar os dados enviados pelo formulário; method: define o método de envio de dados para o servidor (get/post); enctype: tipo de codificação dos dados enviados para o servidor; accept-charset: lista de codificação de caracteres. Por default usa a mesma codificação do documento; accept: especifica uma lista de tipos de conteúdo para os dados a serem aceitos e processados no servidor; name: nome para o formulário. Esse atributo está em desuso e, em seu lugar, deve ser usado o atributo id. 4
  5. 5. Outros atributos do form id class lang style title target onsubmit onreset onclick ondblclick onmousedown onmouseup onmouseover onmousemov e onmouseout onkeypress onkeydown onkeyup 5
  6. 6. Controles de Formulário input type text password checkbox radio submit reset file hidden image button accesskey tabindex name src alt size Maxlength value (obrig. checkbox e radio) checked (obrig. checkbox e radio) readonly disabled usemap align 6
  7. 7. Objeto formulário 7 HTML <form method=” ” action=” ” id=”fdemo”> ... </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var formdemo = document.getElementById(“fdemo”); } </script>
  8. 8. Objeto formulário 8 HTML <form method=” ” action=” ” id=”fdemo”> ... </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var formdemo = document.forms[0]; }</script> ou <script type=”text/javascript”> window.onload = function( ){ var formdemo = document.forms[“fdemo”]; }</script>
  9. 9. Propriedades do objeto form action 9 HTML <form method=”post” action=”http://www.maujor.com” id=”fdemo”> ... </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.action); //alerta http://www.maujor.com } </script>
  10. 10. Propriedades do objeto form method 10 HTML <form method=”post” action=” ” id=”fdemo”> ... </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.method); //alerta post } </script>
  11. 11. Propriedades do objeto form name 11 HTML <form method=”post” action=” ” id=”fdemo” name=”fnome”> ... </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.name); //alerta fnome } </script>
  12. 12. Propriedades do objeto form length 12 HTML <form method=”post” action=” ” id=”fdemo”> <label for=”nome”>Nome:</label> <input type=”text” id=”nome”/> <label for=”email”>Email:</label> <input type=”text” id=”email”/> <input type=”submit” value=”OK”/> </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.length); //alerta 3 } </script> Retorna a quantidade de controles existentes no formulário
  13. 13. Propriedades do objeto form elements 13 HTML <form method=”post” action=” ” id=”fdemo”> <label for=”nome”>Nome:</label> <input type=”text” id=”nome”/> <label for=”email”>Email:</label> <input type=”text” id=”email”/> <input type=”submit” value=”OK”/> </form> JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.elements[1].tagName); //alerta INPUT alert(fdemo.elements.item(2).value); //alerta OK alert(fdemo.elements.item(0).value); alert(fdemo.elements.item(1).value); } </script> Retorna uma coleção de todos os controles existentes no formulário
  14. 14. FOrm - html5 Apenas letras <input type="text" required="required" name="text" pattern="[a-zs]+$" /> Apenas números <input type="text" required="required" name="numbers" pattern="[0-9]+$" /> Data <input type="date" required="required" maxlength="10" name="date" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}$" min="2012-01-01" max="2014-02-18" /> 14
  15. 15. FORM - HTML5 Hora <input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]{2}:[0-9] {2} [0-9]{2}$" /> Campos genéricos de texto <input type="text" required="required" name="name" /> 15
  16. 16. Validação: Senha 16 <html> <head> <title>Validade Senha</title> <script> function validarSenha(){ senha1 = document.f1.senha1.value senha2 = document.f1.senha2.value if (senha1 == senha2) alert("SENHAS IGUAIS") else alert("SENHAS DIFERENTES") } </script> </head> <body> VALIDAR SENHA <br> <form action="" name="f1"> Senha: <input type="password" name="senha1" size="20"> <br> Confirmar Senha: <input type="password" name="senha2" size="20"> <br> <input type="button" value="Validar" onClick="validarSenha()"> </form> </body> </html>
  17. 17. Validação: Verifica número Inteiro 17 <script type="text/javascript"> var expressao = /^d+$/; function verificarInteiro( val ){ if( expressao.test( val ) ){ alert( "OK" ); } else{ if( val != null && val != "" ){ alert( "Não é um inteiro válido"); } } } </script> <form id="frmInteiro" action="#" onsubmit="verificarInteiro(this.txtInteiro.value); return false;"> <label for="txtInteiro">Valor:</label> <input type="text" size="10" id="txtInteiro" name="txtInteiro"> <input type="submit" value="Validar"> </form> • Em JavaScript, uma expressão regular é delimitada por uma barra / inicial e outra final. • Cada expressão de validação sempre começa com ^ (início de linha) e termina com $ (fim de linha), para garantir que abrange o conteúdo inteiro do texto (parâmetro) a ser validado. • Existe uma seqüência de expressão regular que significa um dígito (0 a 9): d. •Adicionando um + após essa seqüência, significa "uma ou mais ocorrências da seqüência precedente". Isto é, um ou mais dígitos. Note que isso implica o preenchimento obrigatório. •Assim, temos a expressão regular completa para validar um número apenas composto por dígitos.
  18. 18. localizar um determinado termo em uma frase <script type="text/javascript"> var texto = "Expressões regulares em Javascript para iniciantes!"; var RegExp = /Javascript/; if (texto.search(RegExp) != -1) { console.log("Encontrado na posição: "+ texto.search(RegExp)); } else { console.log("Não encontrado!"); } </script> 18 //Verificar se no texto recebido existe a expressão: java script:
  19. 19. Localizar um email em uma string <script type="text/javascript"> var texto = "O meu e-mail é: cpmart@gmail.com"; var RegExp = /b[w]+@[w]+.[w]+/; if (texto.search(RegExp) != -1) { console.log("E-mail localizado na posição: " + texto.search(RegExp)); } else { console.log("E-mail não encontrado!"); } </script> 19
  20. 20. Validando e-mails //Procura por uma palavra que contenha uma ou mais sequências de algarismos (letras ou números) (b[w]+); //Seguidos de um arroba (@); //Seguido de outra sequência de um ou mais algarismos ([w]+); //Seguidos de um ponto (.); //Seguido de outra sequência de um ou mais algarismos ([w]+). 20
  21. 21. Validando E-mails <script type="text/javascript"> var texto = "cpmart@gmail.com"; var RegExp = /^[w]+@[w]+.[w|.]+$/; if (RegExp.test(texto) == true) { console.log(“Formato válido!"); } else { console.log(“Formato inválido!"); } </script> 21
  22. 22. Validando e-mails /* Verificando se o texto recebido é iniciado por um ou mais algarismos (^[w]+); seguidos de arroba (@); Seguido de um ou mais algarismos ([w]+); Seguido(s) de um ponto (.); Seguido (e finalizado) por um ou mais algarismos ou pontos ([w| .]+$); */ 22
  23. 23. Validando CPF <script type="text/javascript"> var texto = "000.000.000-00"; var RegExp = /^[d]{3}.[d]{3}.[d]{3}-[d] {2}$/; if (RegExp.test(texto) == true) { document.write("Formato válido!"); } else { document.write("Formato inválido!"); } </script> 23
  24. 24. Validando CPF /* Verificando se o texto recebido é iniciado por três números (^[d]{3}); seguidos de ponto (.); seguido de três números ([d]{3}); seguidos de ponto (.); seguido de três números ([d]{3}); seguidos de hífen (-); seguido (e finalizado) por dois números ([d]{2}$); */ 24
  25. 25. Recuperar um array <script type="text/javascript"> var texto = "Eu nasci em 01/23/4567”; var RegExp = /([d]{2})/([d]{2})/([d]{4})/; if (texto.match(RegExp) != null) { console.log("Propriedades do método match: <br>"+ "Frase: "+texto.match(RegExp).input+"<br>"+ "Posição do 1º caractere: "+texto.match(RegExp).index+"<br>"+ "Resultado da ER: "+texto.match(RegExp)[0]+"<br>"+ "Primeiro grupo: "+texto.match(RegExp)[1]+"<br>"+ "Segundo grupo: "+texto.match(RegExp)[2]+"<br>"+ "Terceiro grupo: "+texto.match(RegExp)[3]+"<br>"); } else { console.log(“Nenhum texto ou expressão foram casados!"); } </script> 25
  26. 26. Validando CPF /* Verificando se o texto recebido contém dois números (([d] {2})): veja que estão entre parênteses; seguidos de barra (/); Seguida de dois números (([d]{2})): veja que estão entre parênteses; seguidos de barra (/); Seguida de quatro números (([d]{4})): veja que estão entre parênteses; Os parênteses determinam os grupos! */ 26
  27. 27. Método Replace O método replace é o método de uma string e é nativo do JavaScript. No entanto, pode ser utilizado em conjunto com as Expressões Regulares extendendo significativamente a capacidade de manipulação dos grupos casados na string, pela ER. Exemplo: Suponha que no seu site existe um campo para o usuário digitar os números do CPF. Esse campo aceita apenas números, mas, antes do valor ser enviado ao Banco de Dados, você deseja converter a sequência numérica para o formato padrão do CPF, que é: ###.###.###-## (#: qualquer número de 0 a 9). 27
  28. 28. Máscara para CPF <script type="text/javascript"> //CPF recuperada de um campo text, por exemplo: var texto = "00000000000"; var RegExp = /^([d]{3})([d]{3})([d]{3})([d]{2})$/; if (texto.search(RegExp) != -1) { var mascCPF = texto.replace(RegExp,"$1.$2.$3-$4"); document.write (mascCPF); } else { document.write("Nenhum texto ou expressão foram casados!"); } </script> 28 /* Dividindo por grupos: Verificando se a expressão é iniciada por 3 números (^([d]{3})); seguidos de 3 números (([d]{3})); seguidos de 3 números (([d]{3})); seguidos de 2 números e finalizada (([d]{2})$); */
  29. 29. Validação: Verifica CEP 29 <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> function Trim(strTexto) { return strTexto.replace(/^s+|s+$/g, ''); } function IsCEP(strCEP) { var objER = /^[0-9]{2}.[0-9]{3}-[0-9]{3}$/; strCEP = Trim(strCEP) if(strCEP.length > 0) { if(objER.test(strCEP)) alert("CEP válido!"); else alert("CEP inválido!"); } else alert("Caixa de Texto Vazia"); } </script> <form name="frm"> <label for="cep">CEP:</label> <input type="text" size="12" id="cep" name="cep" onblur="IsCEP(frm.cep.value);"> </form> </body> </html>

×