검사기

검사기는 필드에서 새 값을 가져와 작동하는 함수입니다. 필드를 간단하게 맞춤설정할 수 있습니다. 이를 통해 필드 값이 변경되거나, 입력을 수정하거나, 허용되는 값을 제한할 때 기능을 트리거할 수 있습니다.

일반적인 예는 다음과 같습니다.

  • 문자만 허용하도록 텍스트 필드 제한
  • 텍스트 필드가 비어 있지 않아야 합니다.
  • 미래의 날짜를 입력해야 합니다.
  • 드롭다운을 기반으로 블록의 도형 수정

검사기 유형

검사기는 어떤 종류의 검사기인지에 따라 실행되는 시간이 다릅니다.

클래스 검사기는 필드 유형의 클래스 정의의 일부이며 일반적으로 필드에서 허용하는 값의 유형을 제한하는 데 사용됩니다 (예: 숫자 필드는 숫자 문자만 허용함). 클래스 검사기는 생성자에 전달된 값을 포함하여 필드에 전달된 모든 값에서 실행됩니다.

클래스 검사기에 관한 자세한 내용은 맞춤 필드 만들기의 클래스 검사기 구현 섹션을 참고하세요.

로컬 유효성 검사 도구는 필드가 생성될 때 정의됩니다. 로컬 검사기는 생성자에 전달된 값을 제외하여 필드에 전달된 모든 값을 대상으로 실행됩니다. 즉, 다음 위치에서 실행됩니다.

  • 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_ 함수에 의해 지정됩니다.

Nulling 검사기의 예:

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

nulling 검사기가 있는 텍스트 입력 필드

정의되지 않은 반환 값

정의되지 않았거나 반환 구문이 없는 입력 값입니다. 즉, 입력 값이 필드의 새 값이 되어야 합니다. 이러한 유형의 검사기는 일반적으로 변경 리스너 역할을 합니다.

리스너 검사기의 예:

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