¿Cómo agrego una validación de e-mail en una función JavaScript?

SalParadise · #1 (**permalink**) 14/02/2013, 09:23

Hola a todos! Soy un novato en desarrollo y tengo una duda respecto a la validación de un e-mail en una función JavaScript que ya tengo creada para un formulario muy básico con el que estoy practicando. Les cuento:

Creé una función JS que valida algunos datos (la existencia o no de ellos) en un formulario que que nombré como name="valida_datos_get_frm".

La función es:

Código PHP:

  function validarDatosPOST() { 
 
    var verificar=true; 
             
    if(!document.valida_datos_post_frm.nombre_txt.value) { 
        alert("El campo nombre es requerido"); 
        document.valida_datos_post_frm.nombre_txt.focus(); 
        verificar = false; 
    } else if 
        (!document.valida_datos_post_frm.password_txt.value) { 
        alert("El campo password es requerido"); 
        document.valida_datos_post_frm.password_txt.focus(); 
        verificar = false; 
    } else if  
        (!document.valida_datos_post_frm.sexo_rdo[0].checked && !document.valida_datos_post_frm.sexo_rdo[1].checked) { 
        alert("El campo sexo es requerido"); 
        document.valida_datos_post_frm.sexo_rdo[0].focus(); 
        verificar = false; 
    } 
             
    if(verificar) { 
        document.valida_datos_post_frm.submit (); 
    } 
             
}

La misma se ejecuta con onclick de la siguiente manera:

Código PHP:

  window.onload = function () { 
    document.getElementById("enviar-post").onclick = validarDatosPOST; 
}

A esta función necesito agregar un else if que permita validar una dirección de E-MAIL verificando que está correctamente redactada. Intenté de diversas formas tratar de agregar una variable del tipo (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(email)) pero no sucede nada.

Espero que alguien me pueda guiar en este asunto.
Saludos a todos.

chuidiang · #2 (**permalink**) 14/02/2013, 10:35

Pues la idea es esa, pero asegúrate que la expresión regular que has puesto vale para emails.

Por ejemplo, lo de {2,3,4} debería ser {2,4}, es decir, sólo dos números, el mínimo y el máximo.

Se bueno.

SalParadise · #3 (**permalink**) 14/02/2013, 10:48

Chuidiang, gracias por tu respuesta. Al ser un novato en este tema y no conocer demasiado (estoy realizando una especie de ejercicio de práctica), no sé cómo debo insertar dicha expresión regular. Intenté lo siguiente pero no se ejecuta el submit del formulario:

Código PHP:

  } else if 
    (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3,4})+$/.test(email)){ 
    alert("La dirección de email es incorrecta."); 
}

Quizás me puedas dar comentar cómo debería funcionar esa línea específicamente para que tome la validación.

SALUDOS.

emprear · #4 (**permalink**) 14/02/2013, 13:53

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
/* script */
function validar(){
    
var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var email_ingresado = document.getElementById('email').value;
 if(!emailReg.test(email_ingresado)) {
 alert('email no válido');
return false;
}
}
//]]>
</script>
</head>
<body>
<form action="x.html" method="post" onsubmit="return validar();">
<input type="text" id="email" name="email" />
<input type="submit" value="enviar" />
</form>
</body>
</html>

Para la próxima hacé una búqueda más intensiva en FDW, hay numerosas respuestas a eso

SAludos

sonickseven · #5 (**permalink**) 14/02/2013, 14:18

es mucho mas facil de lo qeu se imaginan yo tenia el mismo problema ya les doy la solucion pero yo lo hago con jquery que es mas facil por cierto amigo SalParadise aprende un poco de jquery...

bueno esta es la solucion:
primero tienes un formulario html?? si no estoy mal y si no tranquilo no importa iual funciona

Código HTML:

Ver original<form>
<table>
<tr>
<td>Correo</td>
<td><input type="text" name="txt_mail" value="" size="23" class="txt_mail"/></td>
</tr>
<tr>
<td>Celular</td>
<td><input name="txt_celular" type="text" value="" size="23" maxlength="10" class="txt_celular"/></td>
</tr>
<tr>
<td>Contraseña</td>
<td><input type="password" name="txt_contra1" value="" size="23" class="txt_contra1"/></td>
</tr>
<tr>
<td>
<input name="bt_ingresar" type="submit" class="boton" value="REGISTRAR" />
</td>
</tr>
</table>
</form>

ahora aparte (yo lo hago asi) creo el archivo js y meto lo siguiente

Código Javascript:

Ver original$(document).ready(function(){
        $('.txt_celular').numeric();
        var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
        $(".boton").click(function (){
             if( $(".txt_mail").val() == "" || !emailreg.test($(".txt_mail").val()) ){
            $(".txt_mail").focus().after("<span class='error'>Ingrese un email correcto</span>");
            return false;
        }
         });
});

y listos pero no olvides tener la libreria de jquery que aunque no quieras tendras que tenerla o referenciarla con la url que google da y el nombre del archivo js que te pase.

tambien puedes cponseguir en internet algoq eu se llama jqueryvalidator que tambien te tendra respuestas y otra cosa nueva y muy buena :D y es html 5 eso te evita todo lo anterior!! que bn averigua sobre input html5.

Lo cierto es que las tecnolias cada ves son mas y no te puedes quedar atras!!

Carlangueitor · #6 (**permalink**) 14/02/2013, 15:11

¿Cargar todo jQuery para una validación tan sencilla?

jomaruro · #7 (**permalink**) 15/02/2013, 14:55

Hola:

Cita:

Iniciado por Carlangueitor

¿Cargar todo jQuery para una validación tan sencilla?

Yo pienso lo mismo.

Aquí hay un sencillo ejemplo sin incluir toda la librería JQuery.

Validar email con javascript

Saludos.