http://www.elcodigo.com

Scripts y código de ejemplo : JavaScript : Formularios y cuestionarios :

Validación de campo vacío, email y URL

Autor
Fecha inserción
David Hernández Sanz
19/04/2001
Dificultad
Soportado por

N2+ IE3+

Descripción | Ver ejemplo | Ver código fuente | Imprimir script

Para imprimir este script, pulsa sobre el botón de imprimir que se muestra a continuación.

Este script debe ir entre las tags <head> y </head> de la página:

<script language="javascript" type="text/javascript">
// Abril 2001, David Hernández Sanz
// http://www.terra.es/personal3/davidhdezsanz/
// Validacion de distintos tipos de campos de formulario:
// - Texto no nulo
// - Direccion de correo electronico (e-mail): alfanum@alfanum.alfanum[.alfanum], donde alfanum son caracteres alfanumericos u otros (pasados como parametro)
// - Direccion en Internet (URL)
// Para ello no se utilizan expresiones regulares.
//
//Este script y otros muchos pueden
//descarse on-line de forma gratuita
//en El Código: www.elcodigo.com

/* dice si cadena es texto no vacio o no                                     */
function vacio(cadena)
  {                                    // DECLARACION DE CONSTANTES
    var blanco = " \n\t" + String.fromCharCode(13); // blancos
                                       // DECLARACION DE VARIABLES
    var i;                             // indice en cadena
    var es_vacio;                      // cadena es vacio o no
    for(i = 0, es_vacio = true; (i < cadena.length) && es_vacio; i++) // INICIO
      es_vacio = blanco.indexOf(cadena.charAt(i)) != - 1;
    return(es_vacio);
  }


/* dice si cadena es un email (alfanum@alfanum.alfanum[.alfanum]) o no, don- */
/* de alfanum son caracteres alfanumericos u otros                           */
function email(cadena, otros)
  {                                    // DECLARACION-INICIALIZACION VARIABLES
    var i, j;                          // indice en cadena
    var es_email = 0 < cadena.length;  // cadena es email o no
    i = salta_alfanumerico(cadena, 0, otros); // INICIO
    if(es_email = 0 < i)               // lee "alfanum*"
      if(es_email = (i < cadena.length))
        if(es_email = cadena.charAt(i) == '@') // lee "alfanum@*"
          {
            i++;
            j = salta_alfanumerico(cadena, i, otros);
            if(es_email = i < j)       // lee "alfanum@alfanum*"
              if(es_email = j < cadena.length)
                if(es_email = cadena.charAt(j) == '\.')
                  {                    // lee "alfanum@alfanum.*"
                    j++;
                    i = salta_alfanumerico(cadena, j, otros);
                    if(es_email = j < i) // lee "alfanum@alfanum.alfanum*"
                      while(es_email && (i < cadena.length))
                        if(es_email = cadena.charAt(i) == '\.')
                          {
                            i++;
                            j = salta_alfanumerico(cadena, i, otros);
                            if(es_email = i < j) // lee "alfanum@alfanum.alfanum[.alfanum]*"
                              i = j;
                          }
                  }
          }
    return(es_email);
  }


/* dice si cadena es url (http://... ) o no                                     */
function url(cadena)
  {                                    // DECLARACION DE CONSTANTES
    var http = "http://";              // protocolo HTTP
                                       // DECLARACION DE VARIABLES
    var es_url;                        // cadena es url o no
    if(cadena.length <= 7)             // INICIO
      es_url = false;                  // no cabe "http://*"
    else
      es_url = http.indexOf(cadena.substring(0, 7)) != - 1; // lee "http://*"
    return(es_url);
  }


/* salta caracteres alfanumericos y otros a partir de  cadena[i]  y  da  si- */
/* guiente posicion                                                          */
function salta_alfanumerico(cadena, i, otros)
  {                                    // DECLARACION DE VARIABLES
    var j;                             // indice en cadena
    var car;                           // caracter de cadena
    var alfanum;                       // cadena[j] es alfanumerico u otros
    for(j = i, alfanum = true; (j < cadena.length) && alfanum; j++) // INICIO
      {
        car = cadena.charAt(j);
        alfanum = alfanumerico(car) || (otros.indexOf(car) != -1);
      }
    if(!alfanum)                       // lee "alfanumX"
      j--;
    return(j);
  }
  
/* dice si car es alfanumerico                                               */
function alfanumerico(car)
  {
    return(alfabetico(car) || numerico(car));
  }


/* dice si car es alfabetico                                                 */
function alfabetico(car)               // DECLARACION DE CONSTANTES
  {                                    // caracteres alfabeticos
    var alfa = "ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstuvxyz";
    return(alfa.indexOf(car) != - 1);  // INICIO
  }


/* dice si car es numerico                                                   */
function numerico(car)
  {                                    // DECLARACION DE CONSTANTES
    var num = "0123456789";            // caracteres numericos
    return(num.indexOf(car) != - 1);   // INICIO
  }


// ejemplo validacion formulario
function ValidaCampos(form)
  {
    if(vacio(form.texto.value))
      alert("Texto incorrecto.");
    else if(!email(form.email.value, "-_"))
      alert("Dirección de correo electrónico incorrecta.");
    else if(!url(form.url.value))
      alert("Dirección del sitio incorrecta.");
    else
      //sustituir esta linea por return(true) para hacer el submit de un formulario real
      alert("Los datos son correctos");
    return(false);
  }





</script>

Es necesario añadir el siguiente código a la página HTML, entre <body> y </body>:


<form name="miformu" action="mailto:mi@mail.com" onSubmit="return ValidaCampos(this)">Texto:<br><input type="text" name="texto" size="10"><br>Correo electrónico:<br><input type="text" name="email" size="10"><br>Dirección (URL):<br><input type="text" name="url" size="10"><br><br><input type="submit" value="Validar"> <input type="reset" value="Borrar"></form>