验证器

验证程序是一个函数,它接受字段的新值,然后 。通过自定义字段,您可以非常轻松地对字段进行自定义。通过这类事件,您可以 修改输入或限制哪些值 是可接受的。

一些常见示例:

  • 将文本字段限制为仅接受字母。
  • 要求文本字段不得为空。
  • 要求日期是将来的日期。
  • 根据下拉菜单修改区块的形状。

验证程序的类型

验证程序会在不同的时间执行,具体取决于它们的验证程序类型 。

类验证器是字段类型的类定义的一部分, 通常用于限制字段允许的值的类型(例如数字 字段只接受数字字符)。针对所有值运行类验证器 (包括传递给构造函数的值)。

如需详细了解类验证程序,请参阅 实现类验证器 部分。

本地验证器是在构建字段时定义的。本地 验证程序会针对传递到此字段的所有值运行,但传递到 构造函数。也就是说,这些广告会在:

  • XML 中包含的值。
  • 传递给 setValue 的值。
  • 传递给 setFieldValue 的值。
  • 用户更改的值。

类验证程序先于本地验证程序运行,因为它们的行为方式类似于 接待员。它们在传递之前确保值的类型正确 。

如需详细了解值验证的顺序以及 请参阅“值”

注册本地验证程序

您可以通过以下两种方式注册本地验证器:

  • 直接添加到字段的构造函数中。
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);
  }
};

上述任一方法都可以封装在 扩展程序, 以支持 JSON 格式。

根据要用作字段的类型不同,此字段的值可能差异很大 已验证(例如,数字字段将存储数字,而文本输入字段 会存储一个字符串) 字段。

返回值

验证器的返回值决定了字段接下来执行的操作。那里 有三种可能性:

修改后的返回值

修改后的值或其他值,这些值随后会成为字段的新值。 这通常用于清理值,例如移除末尾 空格。

修改验证器示例:

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

带有修改验证器的文本输入字段

Null 返回值

Null,表示指定的值无效。在大多数情况下 并忽略输入值。确切的行为由字段的 doValueInvalid_ 函数

Null 验证器示例:

// 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;
};

带有 null 验证器的文本输入字段

未定义的返回值

未定义(或无 return 语句)或输入值,这意味着 输入值应成为字段的新值。这些类型的验证程序 通常充当更改监听器。

监听器验证器示例:

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

再次注意,显示 text 不一定会反映字段的 value

在验证器内部,this 是指字段,而不是块。如果您需要 使用 getSourceBlock 函数访问验证器内的代码块。您可以 也可以使用 bind 函数 以设置在其中调用验证器的上下文。

使用 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);
  }
};

使用 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);
  }
};