Validación de formularios normalmente usado para producir en el servidor, después de que el cliente había introducido todos los datos necesarios y luego presiona el botón Enviar. Si los datos introducidos por un cliente era incorrecta o fue simplemente faltan, el servidor tendría que enviar todos los datos al cliente y solicitar que se vuelva a presentar el formulario con la información correcta. Esto fue realmente un largo proceso que se usa para poner una gran cantidad de carga en el servidor.
JavaScript proporciona una manera de validar los datos del formulario en la computadora del cliente antes de enviarlo al servidor web. Validación de forma generalmente realiza dos funciones.
- Básica Validación - En primer lugar, la forma debe ser revisado para asegurarse de que todos los campos obligatorios se rellenan Se requeriría sólo un bucle a través de cada campo en el formulario y comprobar los datos..
- Formato de Validación de Datos - En segundo lugar, los datos que se introduce debe comprobarse la forma y el valor correcto. Su código debe incluir lógica adecuada para probar la exactitud de los datos.
Ejemplo
Vamos a tomar un ejemplo para entender el proceso de validación. Este es un sencillo formulario en formato html.
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Salida
Validación Formas Básicas
En primer lugar vamos a ver cómo hacer una validación básica formulario. En el formulario de arriba, hacemos un llamado validate () para validar los datos cuandoonsubmit ocurre evento. El siguiente código muestra la implementación de esta función validate ().
<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
Formato de datos de validación
Ahora vamos a ver cómo podemos validar nuestros datos de formulario introducidos antes de enviarla al servidor web.
El siguiente ejemplo muestra cómo validar una dirección de correo electrónico introducido. Una dirección de correo electrónico debe contener al menos un signo "@" y un punto (.). Además, la '@' no debe ser el primer carácter de la dirección de correo electrónico, y el último punto debe ser por lo menos un carácter después del símbolo "@".
Ejemplo
Pruebe el siguiente código para la validación de correo electrónico.
<script type="text/javascript">
<!--
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>
No hay comentarios:
Publicar un comentario