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 site tem apenas um campo para cadastro?
Este tipo de campo é muito utilizado para montar um banco de dados de emails de clientes que gostariam de se manter informado das notícias, promoções e novidades daquele site.
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.
Related posts:
PÔ LEGAL