Como validar e-mail em Jquery?
escrevi o seguinte programa de validação do formulário de contacto. Como posso validar um campo de E-mail?
<style type="text/css">
div.contactForm { width:370px; margin:0 auto; }
form.contactUs label { display:block; }
form.contactUs input { margin-bottom:10px; }
input.submit { margin-top:10px; }
input.error { background:#FF9B9B; border:1px solid red; }
div.errorMessage { color:#f00; padding:0 0 20px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.errorMessage').hide();
$('.submit').click(function() {
var name = $('input.name').val();
var email = $('input.email').val();
var phone = $('input.phone').val();
if (name == '') {
$('input.name').addClass('error');
$('input.name').keypress(function(){
$('input.name').removeClass('error');
});
}
if (email == '') {
$('input.email').addClass('error');
$('input.email').keypress(function(){
$('input.email').removeClass('error');
});
}
if (phone == '') {
$('input.phone').addClass('error');
$('input.phone').keypress(function(){
$('input.phone').removeClass('error');
});
}
if (name == '' || email == '' || phone == '') {
$('.errorMessage').fadeIn('medium');
return false;
}
});
});
</script>
<div class="contactForm">
<h2>Contact Us</h2>
<div class="errorMessage">Please enter all required fields.</div>
<form action="http://google.com" method="post" class="contactUs">
<label>Name <em>(required)</em></label>
<input type="text" name="name" class="name" size="30" />
<label>Email <em>(valid email required)</em></label>
<input type="text" name="email" class="email" size="30" />
<label>Phone <em>(required)</em></label>
<input type="text" name="phone" class="phone" size="30" />
<label>Message</label>
<textarea name="message" cols="40" rows="10"></textarea>
<br />
<input type="submit" name="submit" value="Submit" class="submit" />
</form>
</div><!--contactForm-->
editar
por validação, quero dizer que o valor indicado deve conter um " @ "e um" . "no lugar certo.
também não quero usar quaisquer plugins adicionais.
4 answers
Pode usar a RegEx se não quiser usar quaisquer 'plugins'.
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(valueToTest))
// Do whatever if it passes.
else
// Do whatever if it fails.
Isto vai dar-te a maioria dos E-mails. Uma leitura interessante sobre validar e-mails com RegEx.
Você pode testar o script aqui: http://jsfiddle.net/EFfCa/
Se realmente não quiser usar um plugin, descobri que este método é muito bom:
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if( !emailReg.test( email ) ) {
return false;
} else {
return true;
}
}
Http://thejimgaudet.com/articles/support/web/jquery-e-mail-validation-without-a-plugin/
Estou a usar ketchup para validação do formulário. Há também o plugin do bassassist . Verifique um plugin, ele irá poupar-lhe horas de código de escrita regex.
Mude o seu bloco input.email
como este:
if (email == '') {
$('input.email').addClass('error');
$('input.email').keypress(function(){
$('input.email').removeClass('error');
});
$('input.email').focusout(function(){
$('input.email').filter(function(){
return this.value.match(/your email regex/);
}).addClass('error');
});
}
Explicação:
Adicionar acção de foco ao elemento input.email
do formulário, valida o texto de E-mail usando a norma RFC822. Se não conseguir passar, então adicione a classe 'erro'.
Não testei isto no meu navegador, mas deve funcionar para jQuery > 1.4.
Edite: eu removi a regex, coloque a sua favorita lá.