UNIVERSIDADE PITÁGORAS UNOPAR ANHANGUERA
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
MARIA KELLY VIEIRA FREITAS
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA:
Desenvolvimento em JavaScript
RUSSAS/CE
2025
MARIA KELLY VIEIRA FREITAS
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA:
Desenvolvimento em JavaScript
Trabalho apresentado à Universidade, como requisito parcial
para a obtenção de pontos para a média semestral.
Tutor (a): Rogian Villa.
RUSSAS/CE
2025
SUMÁRIO
1 Introdução .....................................................................................................
2 Métodos..........................................................................................................
3 Resultados.....................................................................................................
4 Conclusão ......................................................................................................
Referências Bibliográficas.................................................................................
1. INTRODUÇÃO
A validação de formulários em HTML é uma etapa essencial para assegurar que as
informações inseridas pelos usuários sejam corretas e estejam no formato
adequado. Entre as validações mais comuns está a do campo de e-mail, que
verifica se o endereço informado é válido antes do envio dos dados ao servidor.
O código JavaScript apresentado neste documento tem como objetivo realizar essa
validação de forma simples e eficiente, utilizando expressões regulares para
confirmar se o e-mail digitado segue o padrão correto.
2. MÉTODOS
O código foi desenvolvido na plataforma [Link], utilizando a linguagem
JavaScript integrada a um formulário HTML simples. A abordagem adotada baseia-
se no uso de uma expressão regular (regex) para verificar se o formato do e-mail
inserido pelo usuário está correto. A estrutura do código foi organizada da seguinte
forma:
Atividade 1: Validação de Formulário.
a) Formulário HTML: Foi desenvolvido um formulário contendo um campo de
entrada destinado ao e-mail do usuário e um botão responsável por acionar a
verificação de validade do endereço informado.
Figura 1:
Fonte: O Autor (2025).
b) Função de Validação: Foi criada a função validarEmail(), acionada ao clicar
no botão do formulário. Essa função utiliza a expressão regular /^[^\s@]+@[^\
s@]+\.[^\s@]+$/ para verificar se o endereço de e-mail inserido segue o
formato válido.
Figura 2:
Fonte: O Autor (2025).
Figura 3:
Fonte: O Autor (2025).
c) Exibição de Mensagens: de acordo com o resultado da validação, o sistema
exibe mensagens informando se o e-mail é válido ou se ocorreu algum erro.
Essas mensagens são apresentadas diretamente no documento HTML e
recebem estilos distintos: vermelho para indicar erro e verde para confirmar
o sucesso da validação.
Figura 4:
Fonte: O Autor (2025).
Figura 5:
Fonte: O Autor (2025).
3. RESULTADOS
O código desenvolvido demonstrou ser eficaz na validação da estrutura básica de
um endereço de e-mail, verificando se ele segue o formato correto de
“usuario@dominio”.
Integrado a um formulário HTML, o código fornece feedback imediato ao usuário,
informando se o e-mail inserido é válido ou não.
Em casos de erro, além de exibir a mensagem correspondente, o sistema também
apresenta uma orientação sobre o formato adequado que o endereço de e-mail
deve seguir.
a) Realizar validação de e-mail INVÁLIDO:
Figura 4:
Fonte: O Autor (2025).
b) Realizar validação de e-mail VÁLIDO:
Figura 5:
Fonte: O Autor (2025).
4. CONCLUSÃO
A validação de campos é uma prática fundamental para garantir a qualidade dos
dados inseridos pelos usuários em formulários.
O desenvolvimento do código em JavaScript para validação de endereços de e-
mail demonstrou a eficiência das expressões regulares na verificação de padrões
específicos, como o formato de um e-mail.
A integração dessa validação em um formulário HTML proporciona uma
experiência mais intuitiva e interativa, permitindo que o usuário receba um retorno
imediato sobre a correção do e-mail informado.
REFÊNCIAS BIBLIOGRÁFICAS
BRASIL. W3C Brasil — Padrões Web. Disponível em: [Link] Acesso
em: 20 out. 2025.
MOZILLA FOUNDATION. HTML: Linguagem de Marcação de Hipertexto — MDN
Web Docs. Disponível em: [Link]
Acesso em: 20 out. 2025.
MOZILLA FOUNDATION. Expressões Regulares (Regex) — MDN Web Docs.
Disponível em:
[Link]
s. Acesso em: 20 out. 2025.
PLAYCODE. [Link] — Online JavaScript Editor. Disponível em:
[Link] Acesso em: 20 out. 2025.