Desenvolvimento

Javascript

Faculdade Anhanguera
Curso: Ciência da computação
Aluno: João Vitor Cardoso Nascimento
 Relatório de Validação de Formulário com Javascript

O seguinte relatório tem como objetivo esclarecer o desenvolvimento de um

sistema de validação de e-mail no preenchimento de um formulário, foi usado
uma estrutura simples de HTML, CSS e Javascript dentro da plataforma
playcode.io.
Começamos com uma estrutura simples de HTML:

E para dar uma aparência melhor apresentada usamos a seguinte estilização

com o CSS:
Ficou com a seguinte aparência:

Agora para realizarmos a validação do campo de e-mail vamos iniciar o código

Javascript, para isso criaremos uma função que será chamada a cada vez que
um evento de desfoque no campo de e-mail for realizado usando o evento onblur,
para isso adicionaremos a chamada da função no código no HTML:

Agora partindo para o campo de script dentro do HTML mesmo, iniciaremos o

desenvolvimento dessa função, ela receberá como parâmetro o valor que foi
digitado no input, ficará da seguinte maneira:

Seguindo com o código, foi utilizado uma expressão regular para verificar se o
e-mail digitado segue o seguinte padrão: texto@texto.com. Qualquer e-mail
digitado que não tenha esse padrão aparecerá uma mensagem de alerta pedindo
para que o usuário digite um e-mail válido:

Usaremos o método .test() que executa uma busca por uma correspondência
entre uma expressão regular e uma string, ela retornará true ou false.
Com isso criaremos uma condição que se der falsa ficará responsável por
mostrar o alerta ajudando o usuário a digitar um formato de e-mail válido:

Concluindo assim o que foi proposto.

Se o usuário escrever o e-mail errado como nesse teste:

O resultado da validação será ‘false’, sendo assim aparecerá o alerta na tela do

usuário.

Agora escrevendo o e-mail da maneira certa, iremos conseguir concluir o

formulário sem problemas.
O resultado final do código HTML e Javascript: