¿Cómo se puede utilizar JQuery para validar direcciones de correo electrónico?
¿Cómo se puede utilizar JQuery para validar direcciones de correo electrónico?
Puedes usar javascript antiguo y normal para eso:
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
Función jQuery para validar correo electrónico
Realmente no me gusta usar complementos, especialmente cuando mi formulario solo tiene un campo que debe validarse. Utilizo esta función y la llamo cada vez que necesito validar un campo de formulario de correo electrónico.
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( $email );
}
y ahora a usar esto
if( !validateEmail(emailaddress)) { /* do stuff here */ }
Mire http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . Es un buen complemento de jQuery, que permite crear un potente sistema de validación para formularios. Hay algunos ejemplos útiles aquí . Entonces, la validación del campo de correo electrónico en el formulario se verá así:
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});
Consulte la documentación del método de correo electrónico para obtener detalles y ejemplos.
Usaría el complemento de validación jQuery por varias razones.
Has validado, está bien, ¿ahora qué? Necesita mostrar el error, encargarse de borrarlo cuando sea válido, mostrar ¿cuántos errores en total quizás? Hay muchas cosas que puede manejar por usted, no es necesario reinventar la rueda.
Además, otro gran beneficio es que está alojado en una CDN; la versión actual en el momento de esta respuesta se puede encontrar aquí: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Esto significa tiempos de carga más rápidos para el cliente.
<script type="text/javascript">
$(document).ready(function() {
$('.form_error').hide();
$('#submit').click(function(){
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var message = $('#message').val();
if(name== ''){
$('#name').next().show();
return false;
}
if(email== ''){
$('#email').next().show();
return false;
}
if(IsEmail(email)==false){
$('#invalid_email').show();
return false;
}
if(phone== ''){
$('#phone').next().show();
return false;
}
if(message== ''){
$('#message').next().show();
return false;
}
//ajax call php page
$.post("send.php", $("#contactform").serialize(), function(response) {
$('#contactform').fadeOut('slow',function(){
$('#success').html(response);
$('#success').fadeIn('slow');
});
});
return false;
});
});
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!regex.test(email)) {
return false;
}else{
return true;
}
}
</script>
<form action="" method="post" id="contactform">
<table class="contact-table">
<tr>
<td><label for="name">Name :</label></td>
<td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
</tr>
<tr>
<td><label for="email">Email :</label></td>
<td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
<span class="form_error" id="invalid_email">This email is not valid</span></td>
</tr>
<tr>
<td><label for="phone">Phone :</label></td>
<td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
</tr>
<tr>
<td><label for="message">Message :</label></td>
<td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="contactform-buttons" id="submit"value="Send" />
<input type="reset" class="contactform-buttons" id="" value="Clear" />
</td>
</tr>
</table>
</form>
<div id="success" style="color:red;"></div>
