Validando emails con JavaScript
En este articulo vamos a aprender como validar
los campos de un formulario, lo haremos del lado del cliente utilizando el famoso
JavaScript, supongamos que tenemos este formulario:
Lo que queremos es que el usuario nos ingrese
de forma obligatoria su 'nombre y apellido' y su 'email', con el email además
averiguaremos si incluye '@' sino la dirección de email es incorrecta. Primero
veamos el código html que genera el formulario:
<form name="Formulario" method="post"
action="" OnSubmit="return validar(this)">
<table width="98%" border="0" cellspacing="0"
cellpadding="2">
<tr>
<td width="47%" align="center">
<div align="right"><b>Nombre y Apellido </b></div>
</td>
<td width="53%">
<input type="text" name="nomyape">
</td>
</tr>
<tr>
<td width="47%" align="center">
<div align="right"><b>Email </b></div>
</td>
<td width="53%">
<input type="text" name="email">
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="Submit" value="Enviar">
</td>
</tr>
</table>
</form>
Miren bien la primer línea de este código,
observen que se define un evento 'OnSubmit' y en este evento llamamos a una
función JavaScript llamada 'validar()', noten que antes utilizamos la palabra
clave return, esto sirve para cancelar el envío del formulario si este no es
valido, ahora veamos el código JavaScript que valida el formulario:
<script language="JavaScript">
function validar()
{
ingreso = new String()
ingreso = this.Formulario.nomyape.value
if (ingreso.length == 0)
{ alert("Debe ingresar el Nombre y Apellido.")
return false
}
ingreso = this.Formulario.email.value
if (!ingreso.match("@"))
{ alert("Debe ingresar el Email o verifique que sea correcto.")
return false
}
return true
}
</script>
Ahora una breve explicación, lo primero que
hacemos es definir la función que la palabra clave 'function', después creamos
una variable del tipo cadena o String que le asignamos el valor del campo 'nomyape',
luego comprobamos con un 'if' que el tamaño del texto sea igual a 0, si esto
se cumple mostramos una advertencia y ponemos el return a falso, al poner el
return a falso evitamos que el formulario se envíe, luego analizamos el campo
email pero esta ves utilizamos el método 'match' el cual nos devuelve verdadero
o true si se encuentra el carácter pasado como parámetro, es fácil no, nos quedaría
por averiguar si el campo email tiene como mínimo un punto '.' pero esto se
lo dejo a ustedes así practican. Saludos, El Guru
|
