검사기

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

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

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

검사기 유형

검사기는 어떤 종류의 검사기인지에 따라 다른 시점에 실행됩니다.

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

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

로컬 검사기는 필드 생성 시 정의됩니다. 로컬 검사기는 생성자에 전달된 값을 제외하고 필드에 전달된 모든 값에서 실행됩니다. 즉, 다음에서 실행됩니다.

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

null 검사기가 있는 텍스트 입력란

정의되지 않은 반환 값

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

리스너 검사기의 예는 다음과 같습니다.

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

표시 텍스트가 필드의 값을 반드시 반영하지는 않는다는 점에 다시 한번 유의하세요.

이 값

검사기 내에서 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);
  }
};