Análise e Desenvolvimento de Sistema
DESENVOLVIMENTO EM JAVASCRIPT
David Junior Grisante
Londrina, 28 de Outubro de 2025
Introdução
Nesta atividade prática, teve-se como objetivo a implementação de um script
em HTML e JavaScript para realizar a validação de entradas de endereços de e-mail em
um formulário web. A validação de dados é um procedimento fundamental para assegurar
a integridade e a correção das informações fornecidas pelo usuário antes do envio ao
servidor. O desenvolvimento do exercício foi conduzido no ambiente online [Link],
que possibilita a edição, execução e depuração de código diretamente no navegador,
eliminando a necessidade de instalação de ferramentas de desenvolvimento adicionais.
Métodos
O experimento teve início com a criação de um projeto vazio (empty) na
plataforma online [Link]. Em seguida, foi desenvolvido um formulário HTML básico,
contendo um campo de entrada (input) destinado ao e-mail e um botão para submissão
dos dados. Para garantir a integridade das informações fornecidas pelo usuário, foi
implementada uma função em JavaScript responsável pela validação do formato do e-
mail, utilizando expressões regulares (Regex) para verificar a conformidade do padrão
esperado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Validação de E-mail</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, button {
padding: 10px;
margin: 5px 0;
width: 300px;
}
.mensagem {
margin-top: 10px;
font-weight: bold;
}
.erro {
color: red;
}
.sucesso {
color: green;
}
</style>
</head>
<body>
<h2>Formulário de E-mail</h2>
<form id="formEmail">
<label for="email">Digite o e-mail do colega:</label><br>
<input type="text" id="email" name="email"
placeholder="exemplo@[Link]">
<br>
<button type="submit">Enviar</button>
</form>
<div class="mensagem" id="mensagem"></div>
<script>
const form = [Link]('formEmail');
const mensagem = [Link]('mensagem');
[Link]('submit', function(event) {
[Link](); // evita o envio padrão do
formulário
const email = [Link]('email').value;
// Regex simples para validar e-mail
const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if ([Link](email)) {
[Link] = "E-mail válido!";
[Link] = "mensagem sucesso";
} else {
[Link] = "E-mail inválido! Um e-mail
deve conter: nome@[Link]";
[Link] = "mensagem erro";
}
});
</script>
</body>
</html>
Resultados
Após a execução no ambiente [Link], o sistema apresentou o
comportamento esperado em relação à validação de e-mails:
• Quando o campo de entrada encontra-se vazio, é acionada uma mensagem de
alerta solicitando o preenchimento obrigatório do campo.
• No caso de inserção de um endereço em formato inválido (por exemplo, ausência
do caractere “@” ou do domínio), o sistema apresenta uma mensagem explicativa,
indicando a estrutura correta que um e-mail deve seguir.
• Quando o endereço de e-mail informado está em conformidade com o formato
esperado, a entrada é considerada válida, não sendo exibido nenhum alerta ou
mensagem de erro.
• O uso da expressão regular (Regex) foi fundamental para identificar o padrão
correto, garantindo uma verificação eficaz no lado do cliente.
Conclusão
A realização desta prática possibilitou a compreensão aplicada da utilização
do JavaScript para a validação de dados em formulários HTML. A implementação de
mecanismos de validação no lado do cliente revela-se fundamental, pois além de
aprimorar a experiência do usuário, previne a submissão de informações inconsistentes
ou incorretas ao servidor. O ambiente [Link] demonstrou-se uma ferramenta
eficiente e intuitiva, permitindo a execução, o teste e a visualização dos resultados de
forma imediata, contribuindo significativamente para o desenvolvimento de habilidades
práticas em programação web.