검사기

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

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

  • 텍스트 필드가 문자만 허용하도록 제한
  • 텍스트 필드가 비어 있지 않도록 요구
  • 날짜가 미래여야 합니다.
  • 드롭다운에 따라 블록의 모양을 수정합니다.

유효성 검사기 유형

유효성 검사기는 유효성 검사기 유형에 따라 다른 시간에 실행됩니다.

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

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

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

  • 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 Validator의 예:

// 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 validator가 있는 텍스트 입력란

정의되지 않은 반환 값

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

리스너 검사기의 예:

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