validar email de formulario

Maru77 · #1 (**permalink**) 14/04/2012, 15:44

Hola a todos!

Tengo un formulario en el que se envían unos datos a través de php a un correo determinado.

Ahora quiero validar algunos campos, pero el mail no pude teniendo en cuenta el @ y el dominio.

Les dejo el código que tengo:

Código HTML:

<script>

function registrocliente(){
	//valido el nombre 
   	if (document.clientes.nombre.value.length==0){ 
      	 alert("Ingrese su nombre.") 
      	 document.clientes.nombre.focus() 
      	 return 0; 
   	} 	

      // asi solo toma si tiene caracteres el campo
       if (document.clientes.email.value.length==0){ 
      	 alert("Ingrese su email.") 
      	 document.clientes.email.focus() 
      	 return 0; 
   	} 	

	//el formulario se envia 
	document.clientes.submit() 
}


</script>

Código HTML:

 <form name="clientes" method="post" action="registro.php">  
  NOMBRE<br />
  <input name="nombre" type="text" /><br /><br />
  EMPRESA<br />
  <input name="empresa" type="text" /><br /><br />
  TEL&Eacute;FONO<br />
  <input name="telefono" type="text" /><br /><br />
  E-MAIL<br />
  <input name="email" type="text" /><br /><br />
  
 <a href="javascript:registrocliente()" ><img src="images/boton.png" name="Image8" width="133" height="39" border="0" id="Image8" /></a>
   </form>

Espero puedan ayudarme, muchas gracias!

emprear · #2 (**permalink**) 14/04/2012, 17:09

Para validar un email, te aconsejo el uso de una expresión regular y el método test()

Ejemplo

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">
 
var cadena = "xxx@x xx.info"; // reemplazar este valo
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var resultado = formato.test(cadena);
 
if(resultado != true){
alert('error');
}else{
alert('email valido');
}
</script> 
</head>
<body>
 
</body>
</html>

Saludos

Maru77 · #3 (**permalink**) 15/04/2012, 15:47

hola Emprear!

Gracias por tu ejemplo!

intenté ponerlo dentro de la función que ya tenía, la idea es hacerlo así porque de ahí se haría el envío del formulario, previa validación.

la variable cadena le cambié el valor, pero no entiendo muy bien, en este formulario se cargaran diferentes mails ya que se trata de un form de usuarios quizás no estoy comprendiendo la función.

Código HTML:

<script>

function registrocliente(){
	//valido el nombre 
   	if (document.clientes.nombre.value.length==0){ 
      	 alert("Ingrese su nombre.") 
      	 document.clientes.nombre.focus() 
      	 return 0; 
   	} 	

var cadena = "[email protected]"; // reemplazar este valo
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var resultado = formato.test(cadena);
 
if(resultado != true){
alert('error');
}else{
alert('email valido');
}
	//el formulario se envia 
	document.clientes.submit() 
}


</script>

el enlace con el que llamo a la función es este [HTML] <a href="javascript:registrocliente()" ><img src="images/boton.png" name="Image8" width="133" height="39" border="0" id="Image8" /></a>

[/HTML]

emprear · #4 (**permalink**) 15/04/2012, 17:19

Bueno, te explico, el código que puse es solamente como implementar la validación de una dirección de correo utilizando expresiones regulares y test() en javascript

La aplicación de eso a un formulario sería asi, te aclaro además que estoy mofdificando tu sistema porque es poco eficiente, imaginá que ponen un espacio en blanco en "nombre", el valor de la cadena ya no seria 0, por lo tanto pasaría la validación.
Asi mismo es importante eliminar cualquier código html que te sea pasado en los campos

Aplicado a un form quedaría asi

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" />
 
<style type="text/css">
/*<![CDATA[*/
 
.boton{
background-image: url(boton.png);
width: 30px;
height: 15px;
border: none;
background-color: transparent;
color: transparent;
}
 
label{
width: 150px;
display: inline-block;
}
 
/*]]>*/
</style>
<script type="text/javascript">
 
function validar(){
var nombre = document.getElementById('nombre').value;
var email = document.getElementById('email').value;
var email2 = document.getElementById('email2').value;
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 
// validamos si el campo nombre está vacío o no
nombre = nombre.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
nombre = nombre.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
if(nombre == ''){
alert('Ingrese su nombre')
return false;
}
 
var v_email = formato.test(email);
 
if((v_email != true)||(email == "")){
alert('Email no válido');
return false;
}
 
var v_email2 = formato.test(email2);
 
if((v_email2 != true)||(email2 == "")){
alert('Email2 no válido');
return false;
}
 
/// Si no hubo ningún error, el form se procesa
 
alert('gracias ' + nombre);
 
}
 
</script> 
</head>
<body>
<div>
<form action="#" onsubmit="return validar();">
<label for="nombre">Nombre: </label><input type="text" value="" id="nombre" name="nombre" /><br />
<label for="email">Email: </label><input type="text" value="" id="email" name="email" /><br />
<label for="email2">Email 2: </label><input type="text" value="" id="email2" name="email2" /><br />
<input type="submit" class="boton" value="-" />
</form>
</div>
</body>
</html>

Finalmente, si bien javascript puede mejorar la usabilidad del form por parte del cliente, una validación segura requiere ser hecha con un lenguaje del servidor, como php

Saludos

planets · #5 (**permalink**) 16/04/2012, 01:01

Yo lo valido pero usando el framework jquery.validate
Es muy sencillo de usar