Tutorial de www.flipis.net, Categoría: php, Título: PHP, jQuery y JSON, Página: 4

Un comprobador de cajas de texto

A menudo, validar la entrada de usuario en formularios es fundamental para comprobar que los datos son los que necesitamos. Antiguamente esto se podría hacer mandando todo el formulario, comprobando el valor de las variables en servidor, y devolviendo HTML con los errores de validación en la contestación, o procesando la entrada en caso de que no haya errores. Actualmente esto se sigue haciendo en innumerables sitios, pero poco a poco se va implantando el comprobar el contenido de los campos de texto de forma dinámica, uno a uno, para ahorrar transferencia, carga del servidor, y quemazón (de esperar a la barra de recarga) en el cliente. Vamos a hacer un sencillo servicio que comprobará los campos de texto, enteros y coma flotante, aunque la estructura usada debería servir para comprobar casi cualquier campo de formulario. Asimismo, comprobará, en caso de pedírselo, que la cadena de texto a validar no tenga mas o menos caracteres de los especificados. El código de nuestro servicio es como sigue:

phpAjax/InputCheckService.class.php

<?php
require_once(realpath("JSONWebServiceBase.class.php"));

define("_TOO_LARGE_DATA_", "Los datos introducidos tienen demasiados caracteres");
define("_TOO_SMALL_DATA_", "Los datos introducidos tienen muy pocos caracteres");

class InputCheckService extends JSONWebServiceBase
{

   public function __construct($xmlhttp, $post, $get, $browser, $require_query, $arg_list)
   {
      parent::__construct($xmlhttp, $post, $get, $browser, $require_query, $arg_list);
            
      $dataSize = strlen($this->_requestData["data"]);
      if($dataSize < $this->_requestData["min"])
      {
         $this->_jsonArray["CODE"] = "ERROR";
         $this->_jsonArray["EXPLAIN"] = _TOO_SMALL_DATA_;
         $this->dieJSON();
      }
      elseif($dataSize > $this->_requestData["max"])
      {
         $this->_jsonArray["CODE"] = "ERROR";
         $this->_jsonArray["EXPLAIN"] = _TOO_LARGE_DATA_;
         $this->dieJSON();
      }
      
      $tempResultPreg = array();
      
      switch($this->_requestData["type"])
      {
         
         case "text":
            preg_match("/[^a-zA-Z]/", $this->_requestData["data"], $tempResultPreg);
            if(count($tempResultPreg) > 0)
            {
               $this->_jsonArray["CODE"] = "ERROR";
            }
            else
            {
               $this->_jsonArray["CODE"] = "OK";
            }
            break;
            
         case "integer":
            preg_match("/[^0-9]/", $this->_requestData["data"], $tempResultPreg);
            if(count($tempResultPreg) > 0)
            {
               $this->_jsonArray["CODE"] = "ERROR";
            }
            else
            {
               $this->_jsonArray["CODE"] = "OK";
            }
            break;

         case "float":
            preg_match("/[^0-9,\.]/", $this->_requestData["data"], $tempResultPreg);
            if(count($tempResultPreg) > 0)
            {
               $this->_jsonArray["CODE"] = "ERROR";
            }
            else
            {
               $this->_jsonArray["CODE"] = "OK";
            }
            break;
      }
      
      $this->dieJSON();
   }
   
}
$check = new InputCheckService(REQUEST_ACCEPT, REQUEST_ACCEPT, REQUEST_DENIED, REQUEST_DENIED, true, array("data", "type", "min", "max"));
?>

Esta clase vuelve a heredar del servicio base, para asumir que le van a llegar 4 argumentos: data, que representa la cadena de texto a validar, un argumento type que indica si es un texto de letras, un numero entero o un numero en coma flotante, con los valores text, integer y float, un valor min que indica el tamaño mínimo de la cadena, y un max para el tamaño máximo de la cadena. Esta vez seremos mas restrictivos con el acceso, solo lo permitiremos desde AJAX, y por POST. Instanciamos el constructor padre, y evaluamos las cadenas con preg_match. Por último, rellenamos $this->_jsonArray["CODE"] en función de haber validado o no los datos, y devolvemos JSON a la petición. La parte de javascript del código de cliente es como sigue:

input_data_check.php

//Inicialización de jQuery, registramos el evento de "ready" para el elemento document (padre)
$(document).ready(function()
{

});

function checkField(data, type, min, max)
{
   var dataForService = 'data='+data;
   dataForService += '&type='+type+'&max='+max+'&min='+min;
   
   $.ajax({
      url: "phpAjax/InputCheckService.class.php",
      type: "POST",
      data: dataForService,
      dataType: "json",
      success: function(data)
      {
         if(data["CODE"] == "ERROR")
         {
            alert("Incorrecto");
         }
         else if(data["CODE"] == "OK")
         {
            alert("OK");
         }
      }
   });
}

Y las llamadas a checkField están en este código:

<input type="text" name="letras" id="letras" onChange="javascript:checkField(this.value, 'text', 3, 30);" />
<input type="text" name="numeros" id="numeros" onChange="javascript:checkField(this.value, 'integer', 1, 15);" />
<input type="text" name="flotante" id="flotante" onChange="javascript:checkField(this.value, 'float', 2, 15);" />

Así pues, lo que vemos que hacen estas llamadas a checkField() es que en el momento en el que el control pierda el foco, se ejecuta una llamada ajax a la que se las pasan una serie de parámetros, que nos dice si lo que se ha introducido en la caja de texto es correcto o no, a través del array de JSON que hemos venido utilizando hasta ahora. El mostrar un alert() no sería la manera correcta de proceder, sino mostrando un texto o imagen que denotase que la entrada es incorrecta. Pero es una forma de testear que el servicio está activo y funciona correctamente.

Página 3

Página 5

fLIPIS 2009