Como fazer a validação de e-mail em JavaScript? [Com exemplos]
Publicados: 2021-02-23JavaScript é uma linguagem de programação projetada para criar aplicativos. É muito mais rápido do que outras linguagens porque é muito leve e fácil de usar. Ele é usado para criar aplicativos bem projetados.
A validação de email em JavaScript é importante para a experiência do usuário na criação de aplicativos da web. A validação ajuda a passar informações válidas para um servidor do cliente do aplicativo da web.
Índice
O que é Validação?
A validação refere-se ao processo de examinar os valores que o usuário insere. Ele desempenha um papel crucial na criação de aplicativos e aprimora a experiência do usuário. Muitos campos, como números de celular, e-mails, datas e senhas, são validados por meio desse processo.
O JavaScript torna o processo de validação mais rápido devido ao processamento de dados mais rápido do que outras validações do lado do servidor. Agora vamos dar uma olhada na implementação da validação de email em JavaScript .
Validação de e-mail em JavaScript
A validação de e-mail é uma das partes vitais da autenticação de um formulário HTML. E-mail é um subconjunto ou uma sequência de caracteres ASCII, dividido em duas partes usando o símbolo @. Sua primeira parte consiste em informações privadas e a segunda contém o nome de domínio no qual um e-mail é registrado.
Aqui estão os caracteres ASCII da primeira parte:
- Caracteres especiais como # * + & ' ! %@? { ^ } ”
- Caracteres numéricos (0 a 9)
- Ponto final, ponto, etc., com a condição de que não pode ser a última ou a primeira letra do e-mail e não pode ser repetida após a outra.
- Letras maiúsculas (A a Z) e letras minúsculas (a a z)
A segunda parte inclui o seguinte:
- Pontos
- Dígitos
- Hífens
- Cartas
Usar expressões regulares é uma das melhores formas de validação de email em JavaScript . Ele utiliza expressões regulares para definir o padrão do personagem.
Alguns dos exemplos de ID de e-mail válido:
Alguns outros exemplos de ID de e-mail inválido
- [email protected] (um em outro pontos não são permitidos)
- Inownzsite()&@abcd.com (somente caracteres, traço, sublinhado e dígitos são permitidos na expressão regular.)
- Ourwebsiteismne.azbyz.com (aqui o símbolo @ não está lá)
- [email protected] (Aqui o domínio de nível superior não pode começar com um ponto)
- @youmenandwe.we.net (aqui não pode começar com o símbolo @)
- [email protected] (“.b” não é um domínio de nível superior válido)email.js
O arquivo consiste em um código JavaScript necessário para validação de e-mail. Aqui as expressões regulares são usadas para validar um email no lado do cliente de um aplicativo.
Pontos de verificação para validação de e-mail eficiente em código JavaScript:
- Descrever uma expressão regular para validar um endereço de e-mail
- Se um valor de entrada corresponder a expressões regulares
- Se corresponder, envia o alerta dizendo “endereço de e-mail válido”.
- Se não corresponder, envie o alerta dizendo “endereço de e-mail inválido”.
Relacionado: Validação de senha em Javascript
Código de validação de e-mail em JavaScript
Abaixo está o código de validação de e-mail em JavaScript. Este código pode validar se o email criado ou inserido pelo usuário é válido ou não. Salve o arquivo como filename.js.
// trecho de código
função EmailValidation(enteredEmail)
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert(“Sim! um email válido!”);
document.form1.text1.focus();
retorne verdadeiro;
}
Outro
{
alert(“Desculpe! e-mail inválido!”);
document.form1.text1.focus();
retorna falso;
}
}
A função JavaScript é usada no formulário HTML conforme abaixo. Salve o arquivo como filename.html:
<!DOCTYPEhtml>
<html lang=”pt”>
<cabeça>
<meta charset=”utf-8″>
<title>validação de e-mail em JavaScript</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Insira o e-mail para validação</h2>
<form name=”form1″ ação=”#”>
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src=”filename.js”></script>
</body>
</html>
O código a seguir pode adicionar estilo ao formulário usando CSS. Salve o arquivo como filename.css.
li {tipo de estilo de lista: nenhum;
tamanho da fonte: 16pt;
}
.correspondência {
margem: automático;
preenchimento superior: 20px;
fundo de preenchimento: 20px;
largura: 850px;
fundo: rgb(150, 195, 208);
borda: 1px solod rgb(1, 20, 24);
}
.mail h2 {
margem esquerda: 36px;
}
entrada {
tamanho da fonte: 28pt;
}
input:foco, área de texto:foco{
cor de fundo: branco;
}
entrada enviar {
tamanho da fonte: 18pt;
}
Agora você pode executar o código HTML e fazer a validação do email em JavaScript .
Leia: Projetos Javascript no GitHub
Aprenda cursos de software online das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.
Conclusão
A validação de e-mail é muito crucial para evitar criar endereços de e-mail inválidos. Neste artigo, é explicado, com o código, como validar se um id de e-mail é válido ou não e deixar o sistema verificar e notificar o usuário se o id de e-mail inserido não é válido.
Se você estiver interessado em aprender mais sobre desenvolvimento full-stack, confira o Programa PG Executivo do upGrad & IIIT-B em Desenvolvimento de Software Full-stack, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições , IIIT-B Alumni status, projetos práticos práticos e assistência de trabalho com as principais empresas.
