O Projeto consiste em criar um código de um formulário simples em HTML e um
código em JavaScript para realizar a validação de um campo de coleta de um endereço de
e-mail. Onde o objetivo é garantir que o usuário insira um endereço válido e fornecer
mensagens de alerta de erro orientando em caso de entrada invalida, nenhuma entrada ou
confirmando que o e-mail digitado está correto.
Para atingir esse objetivo, o código em HTML possui um formulário com um campo
de entrada de texto para o e-mail e um botão de Validação para chamar a função no
formulário. No código em JavaScript com a função chamada verificarEmail() que é
chamada quando o formulário é verificado. Dentro dessa função, o valor do campo de
entrada de texto é obtido usando o método [Link]('email').value
armazenado em uma variável var email.
Em seguida, é definida uma expressão regular que verifica se o e-mail possui um
formato válido. A expressão regular utilizada é /^[^\s@]+@[^\s@]+\.[com]{3,4}$/. Esta
expressão regular verifica se o e-mail começa com um ou mais caracteres não sendo
espaços em branco, seguidos por um símbolo de arroba @, seguidos por um ou mais
caracteres não sendo espaços em branco simbolizando o domínio do e-mail, seguidos por
um ponto, e terminando com o com sendo obrigatório este último.
Na execução do código o campo de e-mail o código irá validar conforme a estrutura
da expressão regular que é testada usando as expressões condicionais if, else if e else,
onde usa expressões lógicas para analisar se o e-mail corresponde ao formato
especificado, é exibido uma mensagem de alerta informando que o e-mail que é preciso
digitar o e-mail, que o e-mail digitado precisa seguir o exemplo ou se foi digitado
corretamente.
Código HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Validação de Email</title>
</head>
<body>
<!-- Separacao do grupamento de elementos do HTML para estilizacao --
>
<div style="text-align:center">
<!-- Titulo da pagina-->
<h1>Validação de E-mail</h1>
<!-- Elementos do html para a criacao de conteudo, botao e local de
recebimento de valores-->
<label for="email">E-mail</label>
<input type="email" id="email" size="30" required /><br />
<br /><br /><button onclick="verificarEmail()">Verificar E-
mail</button>
</div>
<script src="[Link]"></script>
</body>
</html>
Código JavaScript
// Exibe valor no console do navegador
[Link]();
function verificarEmail() {
// Obtem o valor do campo de email
var email = [Link]('email').value;
// Expressao regular para verificar o formato do email
var emailEr = /^[^\s@]+@[^\s@]+\.[com]{3,4}$/;
// Verifica se o campo está vazio ou não corresponde ao formato de
email esperado
if ([Link]() === '') {
// Mostra uma mensagem de erro se o campo estiver vazio
alert('Por favor, digite um e-mail.');
} else if () {
// Mostra uma mensagem de erro se o formato do e-mail for inválido
alert(
'Por favor, digite um e-mail válido no formato
"username@[Link]".'
);
} else {
// O campo de e-mail está preenchido corretamente
alert('O e-mail foi preenchido corretamente!');
}
}
Com base na implementação descrita, podemos concluir que é possível criar um
código simples em HTML e JavaScript para a realização de validação e campo de e-mail. A
validação é importante para garantir que os usuários insiram endereços válidos, seguindo a
estrutura adequada. Esse método ajuda a melhorar a usabilidade do formulário e a fornecer
orientações claras aos usuários em caso de entrada incorreta.
OBS: O resultado do código pode ser observado e compilado no link disponibilizado pela
tecnologia sugerida para a criação do trabalho: <[Link]