Validadores

Un validador es una función que toma un nuevo valor en los campos y, luego, actúa sobre él. Son una forma sencilla de personalizar un campo. Te permiten activar la funcionalidad cuando cambia el valor de un campo, modificar la entrada o limitar los valores aceptables.

A continuación, hay algunos ejemplos comunes:

  • Restringir un campo de texto para que solo acepte letras
  • Requiere que un campo de texto no esté vacío.
  • Requiere que la fecha sea futura.
  • Modificar la forma de un bloque en función de un menú desplegable.

Tipos de validadores

Los validadores se ejecutan en distintos momentos, según el tipo de validación que sean.

Los validadores de clase forman parte de la definición de clase de un tipo de campo y, por lo general, se usan para restringir el tipo de valor que permite el campo (p.ej., los campos numéricos solo aceptan caracteres numéricos). Los validadores de clase se ejecutan en todos los valores pasados al campo (incluido el valor que se pasó al constructor).

Para obtener más información sobre los validadores de clase, consulta la sección Cómo implementar un validador de clases en Cómo crear un campo personalizado.

Los validadores locales se definen durante la construcción de un campo. Los validadores locales se ejecutan en todos los valores que se pasan al campo excepto el valor que se pasa al constructor. Esto significa que se ejecutan en las siguientes plataformas:

  • Valores contenidos en XML.
  • Valores que se pasaron a setValue.
  • Valores que se pasaron a setFieldValue.
  • Valores modificados por el usuario.

Los validadores de clase se ejecutan antes que los validadores locales, ya que actúan como puertas de enlace. Se asegura de que el valor sea del tipo correcto antes de pasarlo.

Para obtener más información sobre la secuencia de validación de valores y los valores en general, consulta Valores.

Registra un validador local

Los validadores locales se pueden registrar de dos maneras:

  • Se agrega directamente en el constructor de un campo.
Blockly.Blocks['validator_example'] = {
  init: function() {
    // Remove all 'a' characters from the text input's value.
    var validator = function(newValue) {
      return newValue.replace(/\a/g, '');
    };

    this.appendDummyInput()
        .appendField(new Blockly.FieldTextInput('default', validator));
  }
};
Blockly.Blocks['validator_example'] = {
  init: function() {
    // Remove all 'a' characters from the text input's value.
    var validator = function(newValue) {
      return newValue.replace(/\a/g, '');
    };

    var field = new Blockly.FieldTextInput('default');
    field.setValidator(validator);

    this.appendDummyInput().appendField(field);
  }
};

Cualquiera de los métodos anteriores se puede unir en una extensión para admitir el formato JSON.

El valor del campo puede ser muy diferente según el tipo de campo que se va a validar (p.ej., un campo numérico almacenará un número, mientras que un campo de entrada de texto almacenará una string), por lo que es mejor leer la documentación de tu campo específico antes de crear un validador.

Valores que se muestran

El valor que se muestra del validador determina lo que el campo hace a continuación. Existen tres posibilidades:

Valor que se muestra modificado

Un valor modificado o diferente, que luego se convierte en el valor nuevo del campo. Por lo general, se usa para limpiar un valor, por ejemplo, cuando se quitan los espacios en blanco al final.

Ejemplo de un validador de modificación:

// Remove all 'a' characters from the text input's value.
var validator = function(newValue) {
  return newValue.replace(/\a/g, '');
};

Campo de entrada de texto con un validador de modificación

Valor de devolución nulo

Nulo, lo que significa que el valor dado no es válido. En la mayoría de los casos, el campo ignorará el valor de entrada. El comportamiento exacto se especifica con la función doValueInvalid_ del campo.

Ejemplo de un validador de anulación:

// Any value containing a 'b' character is invalid.  Other values are valid.
var validator = function(newValue) {
  if (newValue.indexOf('b') != -1) {
    return null;
  }
  return newValue;
};

Campo de entrada de texto con un validador de anulación

Valor que se muestra no definido

Valor indefinido (o sin declaración de devolución) o el valor de entrada, lo que significa que el valor de entrada debe convertirse en el valor nuevo del campo. Por lo general, estos tipos de validadores actúan como objetos de escucha de cambios.

Ejemplo de un validador de objeto de escucha:

// Log the new value to console.
var validator = function(newValue) {
  console.log(newValue);
};

Una vez más, observa que el text que se muestra no necesariamente refleja el value del campo.

Valor

Dentro de un validador, this hace referencia al campo, no al bloque. Si necesitas acceder al bloque dentro de un validador, usa la función getSourceBlock. También puedes usar la función bind para establecer el contexto dentro del cual se llama al validador.

Código de muestra con getSourceBlock:

Blockly.Blocks['colour_match'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldColour(
            null, this.validate
        ), 'COLOUR');
    this.setColour(this.getFieldValue('COLOUR'));
  },

  validate: function(colourHex) {
    this.getSourceBlock().setColour(colourHex);
  }
};

Código de muestra con bind:

Blockly.Blocks['colour_match'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldColour(
          null, this.validate.bind(this)
      ), 'COLOUR');
    this.validate(this.getFieldValue('COLOUR'));
  },

  validate: function(colourHex) {
    this.setColour(colourHex);
  }
};