JQuery: Validando campo de email
Olá pessoal.
Mais um post ensinando como validar um campo do tipo email via JQuery.
Segue código:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validando Email</title> <style type="text/css" media="all"> body{ font-family:Arial } .erro{color:#ED1C24; margin:0} .ok{color:#006633; margin:0} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("p").hide(); $('#verificar-email').click(function(){ //desabilitando o submit do form $("form").submit(function () { return false; }); //atribuindo o valor do campo var sEmail = $("#email").val(); // filtros var emailFilter=/^.+@.+\..{2,}$/; var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/ // condição if(!(emailFilter.test(sEmail))||sEmail.match(illegalChars)){ $("p").show().removeClass("ok").addClass("erro") .text('Por favor, informe um email válido.'); }else{ $("p").show().addClass("ok") .text('Email informado está correto!'); } }); $('#email').focus(function(){ $("p.erro").hide(); }); }); </script> </head> <body> <div style="background-color:#CCCCCC;width:275px;padding:10px"> <form id="form" name="cadastrese" method="post" action=""> Email <input type="text" name="email" id="email" /> <input type="submit" value="EMAIL" id="verificar-email" /> </form> </div> <p></p> </body> </html> |
Explicando:
Mas validar somente um campo? Que formulário tem apenas um campo?
Este tipo de campo é muito utilizado para montar um banco de dados de e-mails de clientes que gostariam de se manter informado das notícias, promoções e novidades.
Como a validação é feita?
A validação ocorre quando pressionar o botão verificar-email.
sEmail: recebe o valor digitado no campo
!(emailFilter.test(sEmail)): o método test() é utilizado para localizar um valor igual na string (sEmail). Se encontrar retorna true. Vale lembrar que estamos utilizando o sinal de exclamação (!) antes, querendo dizer, se for diferente de true, exibe a mensagem.
sEmail.match(illegalChars): verifica se o valor digitado contém alguns dos valores definido na variável illegalChars. O método match() utiliza expressões regulares na busca.
PÔ LEGAL
Parabéns pelo post… validação bem funcional.
Mais uma dica interessante, valeu por postar.
Puts, bem legal ein, exatamente o que eu estava precisando heehhe
bela dica que ajuda a todos
Muito boa função. Valeu, abraço.