Baixe o app para aproveitar ainda mais
Prévia do material em texto
7 Sistema de Ensino 100% ONLINE SISTEMAS DE INFORMAÇÃO - BACHARELADO PABLO DA SILVA MOREIRA Roteiro Aula Prática DESENVOLVIMENTO EM JAVASCRIPT Governador Valadares/MG 2022 PABLO DA SILVA MOREIRA Roteiro Aula Prática DESENVOLVIMENTO EM JAVASCRIPT Trabalho apresentado à Universidade UNOPAR, como requisito parcial para a obtenção de média semestral nas disciplinas norteadoras do semestre letivo. Tutor (a): Márcio Barbosa de Lima Governador Valadares 2022 SUMÁRIO 1 INTRODUÇÃO 3 2 TAREFA 1 4 3 TAREFA 2 5 4 CONCLUSÃO 9 INTRODUÇÃO Construção de uma função simples para validação de campo de e-mail de um determinado formulário feito em HTML utilizando a plataforma Playcode. O playcode é uma plataforma online de criação de código em linguagens como JavaScript que permite realizar testes e executar rotinas escritas na linguagem e forma prática, rápida e interativa. Conta com exemplos prontos utilizando bibliotecas, frameworks e APIs. Nesta atividade será criado um código em JavaScript para validar campo de um formulário simples para uma pessoa e assim apresentar uma mensagem orientando como preencher corretamente o campo de em código em JavaScript para validar campo de um formulário simples apresentando uma mensagem que orienta como preencher corretamente o campo de e-mail. TAREFA 1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title> Validação de E-mail com JavaScript</title> <script language="Javascript"> function validacaoEmail(field) { usuario = field.value.substring(0, field.value.indexOf("@")); dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length); if ((usuario.length >=1) && (dominio.length >=3) && (usuario.search("@")==-1) && (dominio.search("@")==-1) && (usuario.search(" ")==-1) && (dominio.search(" ")==-1) && (dominio.search(".")!=-1) && (dominio.indexOf(".") >=1)&& (dominio.lastIndexOf(".") < dominio.length - 1)) { document.getElementById("msgemail").innerHTML="E-mail válido"; alert("email valido"); } else{ document.getElementById("msgemail").innerHTML="<font color='red'>Email inválido </font>"; alert("E-mail invalido"); } } </script> </head> <body> <form name="f1"> <h3> Validação de E-mail com JavaScript</h3> <hr color='gray'> <table> <tr> <td> E-mail: <input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="60" size='65'> </td> <td> <div id="msgemail"></div> </td> </tr> </table> <hr color='gray'> </form> </body> </html> TAREFA 2 Basicamente um e-mail deve possuir as seguintes opções em seu campo. Não possuir espaços; Possuir o @; Possuir algum caractere após o @; Possuir algum caractere antes do @; Possuir pelo menos um ponto após o caractere depois do @ Possuir algum caractere após o ponto. Exemplos de e-mail valido: jo@net.com, luislima@hotmail.com, pedrolima@gmail.com. Como já sabemos, o e-mail possui duas partes separadas pelo @, nesse caso iremos chamar a primeira de usuário e a segunda de domínio. Com base nas opções e nas definições acima podemos determinar quais são as opções que devem ser testadas. O tamanho do texto dentro de Usuário tem que ser maior ou igual a 1(esse valor pode ser alterado), e não pode possuir o @ nem espaço em branco. O domínio tem que possuir ponto, não possuir @ e a posição do primeiro ponto tem que ser maior do que a primeira posição (a primeira posição deve ser uma letra). O último ponto não pode aparecer na última posição, não pode possuir @ nem espaço em branco também e o seu tamanho mínimo é de 3 caracteres. Neste caso apenas iremos trabalhar com o evento onblur, porque esse é o evento quando o usuário acabar de preencher o email e tentar sair para o próximo campo do formulário. Quando o email for inválido o sistema irá mostrar uma mensagem para o usuário em uma div informando que o campo é inválido ou válido, também optamos por deixar uma mensagem com alert em JavaScript informando inválido ou válido. <form name="f1"> <h3>Formulário de Inscrição:</h3> <table> <tr> <td> E-mail: <input type="text" name="email" onblur="validacaoEmail(f1.email)" maxlength="60" size='65'> </td> <td> <div id="msgemail"></div> </td> </tr> </table> </form> O código acima está criando um formulário com apenas o campo de e-mail que aciona o evento onblur (quando o componente perde o foco). Este input está dentro de uma célula da tabela e na célula ao lado existe uma div com id = “msgemail”, div esta onde estaremos escrevendo informações acerca da validação do campo de email. Código javaScript para validação do campo de email <script language="Javascript"> function validacaoEmail(field) { usuario = field.value.substring(0, field.value.indexOf("@")); dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length); if ((usuario.length >=1) && (dominio.length >=3) && (usuario.search("@")==-1) && (dominio.search("@")==-1) && (usuario.search(" ")==-1) && (dominio.search(" ")==-1) && (dominio.search(".")!=-1) && (dominio.indexOf(".") >=1)&& (dominio.lastIndexOf(".") < dominio.length - 1)) { document.getElementById("msgemail").innerHTML="E-mail válido"; alert("E-mail valido"); } else{ document.getElementById("msgemail").innerHTML="<font color='red'>E-mail inválido </font>"; alert("E-mail invalido"); } } </script> Ao criar o input de e-mail da Listagem 1, adicionamos para este input o evento onblur, para que ele acione a função validacaoEmail passando como parâmetro o componente a ser validado no caso o nome do formulário ponto o nome do input (“f1.email”). Na função criada em JavaScript recebemos o campo de e-mail e separamos as duas partes existentes: · usuario= antes do @ · domino= depois do @ Após começarmos as validações que já haviam sido definidas no início do artigo no if na sequencia abaixo: · Tamanho de usuário maior ou igual a 1 caractere. · Tamanho do domínio maior ou igual a 3 caracteres. · Usuário não pode conter o @. · Domínio não pode conter o @. · Usuário não pode conter o “ ” espaço em branco. · Domínio não pode conter o “ ” espaço em branco. · Domínio tem que possuir “.” Ponto. · A posição do primeiro ponto tem que ser maior ou igual a 1, lembrando a posição 0 deve ser ocupado por algum caractere após o @. · A posição do último ponto tem que ser menor que o ultimo caractere, deve ser finalizado o domínio por um caractere. Essas explicações acima foram a validação do e-mail, se todas elas forem satisfeitas, o código entra no if e executa as duas operações a de escrever o conteúdo E-mail válido dentro da div e a de mostrar a mensagem de E-mail válido. Se qualquer uma das condições não for satisfeita, será escrito na div “E- mail Inválido” e mostrada a mensagem. Esta foi uma validação básica de e-mail, podendo algumas das restrições serem mais específicas quanto ao tamanho ou acrescentadas novas validações. Só lembrando, a validação com o alert e a escrita na div podem ser trocadas por outras operações, foram usadas essas duas opções como exemplo por serem mais simples. CONCLUSÃO A presente atividade proporciona uma assimilação excelente dos conceitos estudados, uma vez que foram aplicados de forma prática, o HTML e Javascript onde foi criada a validação de forma programática, dos campos de um formulário de envio de e-mail. O acesso ao formulário pode ser realizado através do link https://playcode.io/938833/.
Compartilhar