Menú Curso Tecnologías en Cliente : Forma con validación de parámetros

(Anterior) JavaScript a Detalle
Nombre: Apellido:
Ciudad
Intereses por Servicio en :
Area Especifica
Correo Electrónico:

Nota:La intención de solicitar su correo electrónico es solo con el propósito de mantener la veracidad de esta lista, en ninguna forma será publicado en esta lista o distribuido a terceros.

Verificación

Esta forma verifica que las variables:

  • Nombre y Apellido sean proporcionadas antes de enviarse al servidor.
  • Correo Electrónico contenga una forma aceptable, esto es, al menos contener @ y .com,.net,.gov,.org,.mx o .es.

Declaraciones

Para llevar acabo la verificación de datos se define una librería JavaScript (verificar.js) que contiene la función validardatos . La forma HTML / XHTML como tal, sólo requiere un parámetro adicional a diferencia de cualquier tipo de forma, este parámetro corresponde a la función onsubmit que es invocada antes de enviarse los datos de la forma al servidor de páginas, dicha declaración se puede observar a continuación :

CODIGO FUENTE DE LA FORMA
<!-- Utilizando Aplicación Perl (CGI-BIN) --> 

<form method="POST" onsubmit="return validardatos(this);" 
                     action="/cgi-bin/insertar.pl">
<!-- Utilizando Aplicación Java (JSP)  -->
<form method="POST" onsubmit="return validardatos(this);" 
                     action="/actualizacion/insertar.jsp">
<table align="center" border="5" width="75%"> 

<tr> 
<td>   Nombre: <input type="text" name="nombre" maxlength="20">  
       Apellido: <input type="text" name="apellido" maxlength="20">  
</td>  
</tr>   

<tr>  
<td>  Ciudad 
   <select name="ci" size="1">  
      <option value="1">  Guadalajara 
      <option value="2">  Mexico,D.F
      <option value="3">  Monterrey
      <option value="4">  Tijuana 
      <option value="5">  Otra 
  </select>  
</td> 
</tr>   

<tr>  
<td>  Intereses por Servicio en : 
   <select name="serv" size="1">  
      <option value="1">  Internet
      <option value="2">  Llamadas a Celulares
      <option value="3">  Internet y Llamadas a Celulares
   </select> 
</td> 
</tr>   

<tr>  
<td>  Area Especifica 
   <select name="ti" size="1">  
      <option value="1">  Residencial 
      <option value="2">  Empresarial 
      <option value="3">  Residencial  y Empresarial 
  </select>  
<br/> 
</td>  
</tr>   

<tr>
<td> Correo Electrónico:
      
      <input type="text" name="email" maxlength="30"> <br/> 

      <font size="2"> Nota:La intención de solicitar su correo electrónico es
      <b>  solo </b> con el propósito de mantener la veracidad de esta lista, 
      en ninguna forma será publicado en esta lista o distribuido a terceros. </font>  

</td>  
</tr>  

<tr> 
<td> 
     
     <input type="reset" value="Reiniciar"> 
     <input type="submit" value="Enviar"> 

</td> 
</tr> 

</table>  
</form> 

Función validardatos

// verificar.js
/** Funciones para revisar datos de Formas 
Para llamar esta forma utilizar 
<form method="POST" onsubmit="return validardatos(this);" 
                     action="cgi-bin/procesar.pl"> 
y dentro de los tags <head> colocar 
<script  type="text/javascript" src="verificar.js"> </script> */
/** Revisar que los valores de los parámetros no estén vacíos */

function validardatos(formObj) {

      if ( (formObj.nombre.value) == "") { 
      alert ("Al parecer no indico su nombre");
      return false;
      
      }


      if ( (formObj.apellido.value) == "") { 
      alert ("No indico su Apellido");
      return false;
       
      }


      if ( (formObj.email.value) == "") { 
      alert ("No indico su correo electrónico"); 
      return false;
      
      }
/** Revisión de terminación de Correo Electrónico **/

if ( formObj.email.value.match(/\.com|\.net|\.gov|\.org|\.mx|\.es/) == null) { 

       alert ("No esta correcto su correo electrónico, por favor reviselo");
       return false; 
   }
}



Los primeros tres if's verifican que las variables nombre,appellido y email no se encuentren vacías, mientras la última función verifica las extensiones del correo electrónico.

Nótese que todos los if's terminan con el comando return false , esto indica que no es posible proseguir, por lo que la verificación de datos se lleva acabo en el siguiente orden: nombre,apellido,email y finalmente la terminación del correo electrónico.

Una vez que se cumpla la lógica de todos los if's se termina la función y se continúan las acciones, en este caso, enviar los datos al servidor.

Terminos Legales de Contenido ©2000-2011 Osmosis Latina

Diseñado bajo estándares : XHTML   CSS  

webmaster@osmosislatina.com