Java script aula 08 - formulários

746 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
746
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
61
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 acceskey tabindex name src alt size maxlenght 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. Validação:Verifica CEP 18 <script type="text/javascript"> // Função para retirar os espaços em branco do início e do fim da string. function Trim(strTexto) { // Substitui os espaços vazios no início e no fim da string por vazio. return strTexto.replace(/^s+|s+$/g, ''); } // Função para validação de CEP. function IsCEP(strCEP, blnVazio) { // Caso o CEP não esteja nesse formato ele é inválido! var objER = /^[0-9]{2}.[0-9]{3}-[0-9]{3}$/; strCEP = Trim(strCEP) if(strCEP.length > 0) { if(objER.test(strCEP)) return true; else return false; } else return blnVazio; } </script> Essa função pode ser chamada na saída do campo CEP, no evento onBlur do textbox ou então no submit da página, no evento onSubmit do formulário.
  19. 19. Validação 19 <script type="text/javascript"> function campoObrigatorio(campo) { if(campo.value.length<1 || campo.value.defaultValue) { return false; } else { return true; } } Preenchimento Obrigatório do Campo
  20. 20. Validação 20 function campoEmail(campo) { if(campo.value.indexOf("@")== -1 || campo.value.indexOf(".")==-1) { return false; } else { return true; } } Email
  21. 21. Validação 21 function campoNumerico(campo) { if(/[^d]/.test(campo.value)) { return false; } else { return true; } } Preenchimento de Campo Numérico
  22. 22. Validação 22 function campoSelecao(campo) { if(!campo.selectedIndex > 0) { return false; } else { return true; } } Preenchimento de Seleção
  23. 23. Validação 23 window.onload = function() { function validarFormulario(formulario) { for (var i=0; i<qdeCampos; i++) { var controle = formulario.elements[i]; if (controle.className.indexOf("obrigatorio") != -1) { if(!campoObrigatorio(controle)) { alert("Por favor preencha o campo "+controle.name + "."); return false; } } if (controle.className.indexOf("email") != -1) { if(!campoEmail(controle)) { alert("Por favor forneça um endereço de email válido."); return false; } }
  24. 24. Validação 24 if (controle.className.indexOf("cpf") != -1) { if(!campoNumerico(controle)) { alert("O campo " + controle.name + " deve conter somente números."); return false; } } if (controle.name == "cor") { if(!campoSelecao(controle)) { alert("Por favor selecione uma opção de cor."); return false; } } } } Continuação...
  25. 25. 25 var formulario = document.getElementById("fdemo"); var qdeCampos = formulario.elements.length; formulario.onsubmit = function() { return validarFormulario(this); } } Continuação...
  26. 26. 26 <form action= "http://www.fatecjales.com.br" id="fdemo" method="post"> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" class="obrigatorio"/> <label for="email" >Email:</label> <input type="text" id="email" name="email" class="email"/> <label for="cpf" >CPF:</label> <input type="text" id="cpf" maxlength="11" name="cpf" class="cpf"/> <h4>Selecione uma cor</h4> <select id="cor" name="cor"> <option value="">Selecione</option> <option value="azul">Azul</option> <option value="verde">Verde</option> <option value="amarela">Amarela</option> <option value="branca">Branca</option> </select> <input type="submit" value="OK" id="ok" name="ok" /> </form> HTML

×