バリデータ

バリデータは、フィールドに新しい値を取り込んで、 できます。フィールドをカスタマイズする簡単な方法です。これを使用すると フィールドの値の変更、入力の変更、どの値の制限を行うかなど、 使用できます。

一般的な例を以下に示します。

  • 文字のみを受け入れるようにテキスト フィールドを制限します。
  • テキスト フィールドが空でないことを必須にします。
  • 将来の日付を要求します。
  • プルダウンに基づいてブロックのシェイプを変更する
で確認できます。

バリデータの種類

バリデータが実行されるタイミングは、バリデータの種類によって異なる 説明します。

クラス バリデータはフィールド タイプのクラス定義の一部であり、 通常は、フィールドで許可される値の型（数値など）を制限するために使用されます。 フィールドには数字しか入力できません）。クラス バリデータはすべての値に対して実行される フィールドに渡される値（コンストラクタに渡された値も含まれます）。

クラス バリデータについて詳しくは、 クラス バリデータの実装 セクションをご覧ください。

ローカル バリデータは、フィールドの構築時に定義されます。ローカル バリデータは、フィールドに渡されるすべての値に対して実行されます。ただし、 コンストラクタがあります。つまり、次の場所で実行されます。

  • XML に含まれる値。
  • setValue に渡される値。
  • setFieldValue に渡される値。
  • ユーザーが値を変更した場合。

クラス バリデータはローカル バリデータよりも先に実行されます。これは、ローカル バリデータのように動作するためです。 対応できます。渡す前に、値が正しい型であることを確認します。 オンにします。

値の検証順序と値の詳細については、 「値」を参照してください。

ローカル バリデータの登録

ローカル バリデータは次の 2 つの方法で登録できます。

  • フィールドのコンストラクタに直接追加します。
で確認できます。 
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 形式をサポートします。

フィールドの値は、作成するフィールドのタイプによって 検証済み（例: 数値フィールドは数値を格納し、テキスト入力フィールドは は文字列を格納します）。そのため、ご使用の環境に固有の フィールドに値を指定します。

戻り値

バリデータの戻り値によって、フィールドの次の処理が決まります。そこで、 次の 3 つの可能性があります。

変更された戻り値

変更された値または異なる値。フィールドの新しい値になります。 これは多くの場合、末尾の文字列を削除するなど、値をクリーンアップするために使用されます。 使用します。

変更検証ツールの例:

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

変更バリデータを使用したテキスト入力フィールド

null 戻り値

Null。つまり、指定された値が無効であることを意味します。ほとんどの場合、このフィールドには 入力値を無視します。正確な動作は、フィールドの doValueInvalid_ Function です。

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

繰り返しになりますが、表示テキストは必ずしもフィールドの value。

この価値

バリデータ内部の this は、ブロックではなくフィールドを参照します。必要に応じて バリデータ内のブロックにアクセスするには、getSourceBlock 関数を使用します。Google Chat では また、 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);
  }
};