Como validar o formulário de email no lado do cliente em JavaScript

Se você deseja enviar dados ao servidor, é necessário verificar duas vezes o formato dos dados a serem enviados. Este processo é chamado Validação do formulário do lado do cliente. A validação do formulário do lado do cliente garante que os dados enviados atendam aos critérios especificados nos controles do formulário.

Do lado do cliente, e -mails Os formulários são validados para capturar dados inválidos para que o usuário possa corrigi -los imediatamente. Em outros casos, se os dados inválidos forem enviados ao servidor, eles serão rejeitados e o servidor correspondente o enviará de volta ao cliente.

Este artigo vai discutir validação formulário de emails sobre o lado do cliente em JavaScript. Então vamos começar!

Como validar o formulário de email no lado do cliente em JavaScript

Um email compreende um “corda,”, Que é representado como um subconjunto de caracteres ASCII, separados em duas partes, utilizando o“@”Símbolo. Pode ser escrito como “userInfo@domain", onde "informação de usuário”É a informação privada do usuário. O comprimento do “informação de usuário“Parte não deve ser mais do que 64 personagens, enquanto o domínio nome pode ter 253 personagens.

O "informação de usuário”A parte pode incluir os caracteres ASCII abaixo:

• Números de 0 para 9.
• Maiúsculas (A-z) e minúsculas (a-z) Cartas em inglês.
• Personagens especiais como ~ _ ' / ? - + = ^ | $ * ' ! & # %
• Você também pode adicionar um personagem de época “.”, Mas não deve ser o primeiro e o último personagem da parte“ userInfo ”e não repeti.

O nome de domínio especificado no endereço de e -mail, como org, informações, rede, com, nós, pode conter dígitos, letras, hífens e parada completa.

Confira abaixo alguns exemplos de IDs de e-mail válidos e inválidos:

Exemplos de formato de email válidos

• [email protected]
• [email protected]
• [email protected]íquido

Exemplos inválidos de formato de email

• galáxia.com (“@”O personagem não é adicionado)
• [email protected] (domínio de nível superior não pode começar com “.”)
• [email protected] (".a”Não é um domínio de nível superior válido)
• [email protected] (não inicie um ID de e -mail com “." personagem)
• @qualquer.domínio.líquido ("informação de usuário”Parte está faltando antes da“@" personagem )

Agora, demonstraremos um exemplo prático relacionado ao formulário de validação por e -mail em JavaScript.

Exemplo: validar o formulário de email no lado do cliente em JavaScript
Primeiro de tudo, criaremos um formulário no lado do nosso cliente com um “entrada”Campo para inserir ID de e -mail e um“Enviar”Botão para verificar o formato de email:

Por favor, insira seu endereço de e -mail

Expressão regular para validar o formulário de email no lado do cliente em JavaScript

Em javascript, Expressões regulares são um dos métodos mais úteis utilizados para validar o formato de email. Eles representam um caráter de padrão que é comparado com a entrada do usuário.

Em nosso arquivo JavaScript, adicionaremos a seguinte expressão regular para validar o ID de email inserido pelo usuário:

MailFormat = /^\ W+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;

A expressão regular acima mencionada permite que você adicione cartas, dígitos (0-9), período “A-Z), período“.E caracteres especiais como ~ _ ' / ? - + = ^ | $ * ' ! & # %, no ID de e -mail.

Vamos criar um “Validar email()”Função em JavaScript, que levará“Entrada de texto”Como argumento. Depois disso, armazenaremos a expressão regular mencionada no “MailFormat”. O adicionado “MailFormat”É então comparado à entrada do usuário. Se o ID de email inserido tiver um formato válido, um alerta aparecerá na tela com a string "Você inseriu um endereço de e -mail válido!”. Caso contrário, informará que o ID de email é inválido:

função validateMail (inputText)
var MailFormat = /^\ W+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;
if (inputText.valor.Match (MailFormat))
Alert ("Você inseriu um endereço de e -mail válido!");
documento.formulário 1.texto 1.foco();
retornar true;

outro
alerta ("endereço de email inválido");
documento.formulário 1.texto 1.foco();
retorna falso;

Também definimos o estilo HTML Elements para aprimorar sua aparência no formulário de validação de email:

Agora, vamos abrir nosso “índice.html ” Arquivo com a ajuda do código VS “Servidor vivoExtensão:

Aqui vem o formulário de validação por e -mail com um campo de entrada e o botão enviar:

Pela primeira vez, inseriremos um ID de email válido e:

Depois de clicar no “Enviar”Button, uma caixa de alerta aparece em nossa página da web, que afirma que o endereço de e -mail inserido é válido:

Agora, para verificar se há um email inválido, escreveremos um e -mail com um formato inválido e clicaremos no botão Enviar:

Você pode ver que nosso formulário de validação por e -mail está funcionando perfeitamente para validar o ID de email de acordo com o formato especificado.

Conclusão

Usando JavaScript, você pode validar formulários de email no lado do cliente. O formulário de validação de email criado é baseado nos requisitos do usuário, como permitir expressões regulares, aceitar apenas caracteres e dígitos no ID de email ou apenas permitir domínios específicos. A validação de formulários de email também ajuda a enviar informações corretas e valiosas para o servidor. Este artigo discutiu o procedimento de validar os formulários de email no lado do cliente em JavaScript com a ajuda de exemplos apropriados.