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.