Java script aula 06 - formulários

  • 2,946 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,946
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
100
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Formulários Cristiano Pires MartinsFonte: JavaScript - Guia do Programador - Maujor
  • 2. IntroduçãoPeças de composição de uma página presentesem praticamente todos os web sites;Interface de coleta de dados, mesmo apenaspara busca;São interativos;O desenvolvedor não deve supor que ousuário digitará apenas o que se espera.
  • 3. FundamentosPrimeiro fundamento do uso de JavaScriptcom formulários: validar campos;Mas ações não devem apenas no cliente, temque ser desenvolvida no lado do servidor;O elemento <form></form> é o container detodos os controles (campos) de um formulário.
  • 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.
  • 5. Outros atributos do formid onresetclass onclick onmouseoutlang ondblclick onkeypressstyle onmousedown onkeydowntitle onmouseup onkeyuptarget onmouseoveronsubmit onmousemove
  • 6. Controles de Formulárioinput nametype src text password alt checkbox size radio submit maxlenght reset file value (obrig. checkbox e radio) hidden checked (obrig. checkbox e radio) image button readonly disabledacceskey usemaptabindex align
  • 7. Objeto formulárioHTML <form method=” ” action=” ” id=”fdemo”> ... </form>JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); } </script>
  • 8. Objeto formulárioHTML <form method=” ” action=” ” id=”fdemo”> ... </form>JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.forms[0]; }</script> ou <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.forms[“fdemo”]; }</script>
  • 9. Propriedades do objeto form acceptCharsetHTML <form method=”post” action=” ” id=”fdemo” accept-charset=”utf-8, iso-8859-1”> ... </form>JavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.acceptCharset);! //alerta utf-8, iso-8859-1 } </script>
  • 10. Propriedades do objeto form actionHTML <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>
  • 11. Propriedades do objeto form methodHTML <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>
  • 12. Propriedades do objeto form nameHTML <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>
  • 13. Propriedades do objeto form lengthHTML <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”/> Retorna a quantidade <input type=”submit” value=”OK”/> de controles existentes </form> no formulárioJavaScript <script type=”text/javascript”> window.onload = function( ){ var fdemo = document.getElementById(“fdemo”); alert(fdemo.length);! //alerta 3 } </script>
  • 14. Propriedades do objeto form elementsHTML <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”/> Retorna uma coleção de <input type=”submit” value=”OK”/> todos os controles </form> existentes no formulárioJavaScript <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 }
  • 15. Exemplo: Abrir um pop up<html><head> <title>Abrir um Pop Up</title><script> function Openjanela(url_pop){ var PopWidth=700; var PopHeight=600; var PopLeft=0; var PopTop=0; Dk=window.open(url_pop,Dk,toolbar=no,status=no,menubar=no,location=no,director ies=no,resizable=yes,scrollbars=yes,width=+PopWidth+,height=+PopHeight +,top=+PopTop+,left=+PopLeft); Dk.focus(); }</script></head><body><form><input type="text" size=50 name="caminho" id="caminho"><input type="button" name="btabrir" value="Abrir"onclick="Openjanela(document.getElementById(caminho).value);"></form></body></html>
  • 16. Data<html><head></head><body><script type="text/javascript">var d = new Date()var dia = d.getDay()var mes = d.getMonth()var ano = d.getFullYear()var nomesDias=new Array("Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado")var nomesMeses=newArray("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro")var s="Hoje é "+nomesDias[dia]+", "+d.getDate()s+=" de "+nomesMeses[mes]+" de "+anodocument.write(s)</script></body></html>
  • 17. Resolução da tela<html><head><title></title></head><body> <script type="text/javascript"> document.write("RESOLUÇÃO DA TELA: ") document.write(screen.width + "*") document.write(screen.height + "<br>") document.write("ÁREA VISÍVEL DISPONÍVEL: ") document.write(window.screen.availWidth + "*") document.write(window.screen.availHeight + "<br>") document.write("COR: ") document.write(window.screen.colorDepth + "<br>") </script></body></html>
  • 18. Validação: Senha<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>
  • 19. Validação: Verifica número Inteiro • 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<script type="text/javascript"> garantir que abrange o conteúdo inteiro do texto (parâmetro) a ser validado. var expressao = /^d+$/; • Existe uma seqüência de expressão regular que function verificarInteiro( val ){ significa um dígito (0 a 9): d. if( expressao.test( val ) ){ alert( "OK" ); • Adicionando um + após essa seqüência, significa } "uma ou mais ocorrências da seqüência precedente". else{ Isto é, um ou mais dígitos. Note que isso implica o if( val != null && val != "" ){ preenchimento obrigatório. alert( "Não é um inteiro válido"); } • Assim, temos a expressão regular completa para validar um número apenas composto por dígitos. } }</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>
  • 20. Validação: Verifica CEP<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 inicio 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; 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,</script> no evento onSubmit do formulário.
  • 21. ValidaçãoPreenchimento Obrigatório do Campo<script type="text/javascript">function campoObrigatorio(campo){ if(campo.value.length<1 || campo.value.defaultValue) {! ! return false;! } else {! ! return true;! }}
  • 22. ValidaçãoEmailfunction campoEmail(campo){ if(campo.value.indexOf("@")== -1 || campo.value.indexOf(".")==-1) {! ! return false;! } else {! ! return true;! }}
  • 23. ValidaçãoPreenchimento de Campo Numéricofunction campoNumerico(campo){! if(/[^d]/.test(campo.value)) {! ! return false;! } else {! ! return true;! }}
  • 24. ValidaçãoPreenchimento de Seleçãofunction campoSelecao(campo){! if(!campo.selectedIndex > 0) {! ! return false;! } else {! ! return true;! }}
  • 25. Validaçãowindow.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;! ! ! }! ! }!! ! !
  • 26. ValidaçãoContinuação... 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; ! ! ! ! } ! ! ! }! ! } }
  • 27. Continuação... var formulario = document.getElementById("fdemo"); ! var qdeCampos = formulario.elements.length;! ! formulario.onsubmit = function() {! ! ! return validarFormulario(this);! ! }}
  • 28. HTML<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="obrigatorio email"/> <label for="cpf" >CPF:</label> <input type="text" id="cpf" maxlength="11" name="cpf" class="obrigatorio 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>