• Validação de emails com Jquery e Regex (Expressão Regular)

Olá pessoal! Hoje vou mostrar como fazer uma validação de email em formulários WEB, utilizando a biblioteca Jquery com o uso de Expressão Regular. Em geral, validação de formulários WEB com Jquery é muito simples. Mais, antes de continuar, o que é esse tal Regex: "Em ciência da computação, uma expressão regular (ou o estrangeirismo regex, abreviação do inglês regular expression) provê uma forma concisa e flexível de identificar cadeias de caracteres de interesse, como caracteres particulares, palavras ou padrões de caracteres. (Wikipédia)" Em resumo: no nosso exemplo, ela nos ajudará verificar se o email digitado no formulário, tem um cadeia de caracteres válida quando comparada a expressão regular. Vamos ao exemplo [...]






O código de validação

Abaixo podemos ver o código completo:
<html>   
   <head>
      <title>
         Validação de Email com Jquery e Regex
      </title>
      <script src="jsjquery-1.6.2.min.js">
      </script>
      <script type="text/javascript">
         $(document).ready(function()
         {
             $('#EnviarCadastro').click(function()
             {
               // captura email
               var email = $("#Email").val();
               // expressão regular
               var emailValido = /^.+@.+..{2,}$/;

               if (!emailValido.test(email))
               {
                 alert('Email inválido!');
               }
             });
          });
      </script>
   </head>
   
   <body>
      Nome:
      <br/>
      <input type="text" id="Nome" />
      <br />
      Email:
      <br />
      <input type="text" id="Email" />
      <br />
      <button id="EnviarCadastro">
         Enviar
      </button>
   </body>
</html>
Vejamos: entre as tags <head>...</head> temos o código Jquery que faz a validação. O código de validação é disparado ao clicar no botão de Id="EnviarCadastro" que fica no formulário HTML. Assim que este botão é acionada, o valor que esta na <input id="Email" type="text" /> é capturado para uma variável e uma outra variável de nome emailValido armazena a expressão regular que valida um email, para então comparar com o valor que esta armazenado na variável email através da função .test() da string de expressão regular. Se a string da variável email, não for válida -  if(!emailValido.test(email))  - é mostrada a mensagem para o usuário, indicando que o email digitado não é válido. Simples assim! ;-)
Através deste exemplo, utilizando as expressões regulares você pode validar qualquer tipo de string, como por exemplo, um telefone. Agora só depende da situação e da imaginação do desenvolvedor...

Nenhum comentário:

Postar um comentário

Top
© CriarProgramas.com 2011 / 2016