Validator

Validator adalah fungsi yang mengambil nilai baru pada kolom, lalu menindaklanjutinya. Widget ini adalah cara mudah untuk menyesuaikan kolom. Hal ini memungkinkan Anda memicu fungsi saat nilai kolom berubah, mengubah input, atau membatasi nilai mana yang dapat diterima.

Beberapa contoh umum:

  • Membatasi kolom teks agar hanya menerima huruf.
  • Mewajibkan kolom teks tidak boleh kosong.
  • Mewajibkan tanggal di masa mendatang.
  • Memodifikasi bentuk blok berdasarkan menu {i>dropdown<i}.

Jenis validator

Validator dijalankan pada waktu yang berbeda, bergantung pada jenis validator tersebut.

Validator class adalah bagian dari definisi class jenis kolom, dan biasanya digunakan untuk membatasi jenis nilai yang diizinkan oleh kolom tersebut (mis. kolom angka hanya menerima karakter numerik). Validator class dijalankan pada semua nilai yang diteruskan ke kolom (termasuk nilai yang diteruskan ke konstruktor).

Untuk informasi selengkapnya tentang validator class, lihat bagian Menerapkan validator class dalam Membuat Kolom Kustom.

Validator lokal ditentukan pada saat pembuatan lapangan. Validator lokal berjalan pada semua nilai yang diteruskan ke kolom kecuali nilai yang diteruskan ke konstruktor. Ini berarti iklan tersebut berjalan di:

  • Nilai yang terdapat dalam XML.
  • Nilai diteruskan ke setValue.
  • Nilai diteruskan ke setFieldValue.
  • Nilai diubah oleh pengguna.

Validator class dijalankan sebelum validator lokal karena bertindak seperti penjaga gerbang. Fungsi ini memastikan bahwa nilai adalah jenis yang benar sebelum meneruskannya.

Untuk mengetahui informasi selengkapnya tentang urutan validasi nilai, dan nilai secara umum, lihat Nilai.

Mendaftarkan validator lokal

Validator lokal dapat didaftarkan dengan dua cara:

  • Ditambahkan secara langsung di konstruktor kolom.
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);
  }
};

Salah satu metode di atas dapat digabungkan dalam ekstensi untuk mendukung format JSON.

Nilai kolom dapat sangat berbeda, bergantung pada jenis kolom yang divalidasi (misalnya, kolom angka akan menyimpan angka, sedangkan kolom input teks akan menyimpan string). Jadi, sebaiknya baca dokumentasi untuk kolom tertentu sebelum membuat validator.

Nilai hasil

Nilai hasil validator menentukan tindakan selanjutnya dari kolom. Ada tiga kemungkinan:

Nilai Hasil yang Diubah

Nilai yang dimodifikasi atau berbeda, yang kemudian menjadi nilai baru kolom. Ini sering kali digunakan untuk membersihkan nilai, seperti dengan menghapus spasi kosong di akhir.

Contoh Memodifikasi Validator:

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

Kolom input teks dengan validator yang memodifikasi

Nilai Hasil Null

Null, yang berarti nilai yang diberikan tidak valid. Dalam kebanyakan kasus, {i>field<i} itu akan mengabaikan nilai {i>input<i}. Perilaku yang tepat ditentukan oleh fungsi doValueInvalid_ kolom.

Contoh Validator 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;
};

Kolom input teks dengan validator nulling

Nilai Hasil Tidak Ditentukan

Nilai input tidak ditentukan (atau tidak ada pernyataan return) atau nilai input, yang berarti nilai input tersebut harus menjadi nilai baru kolom. Jenis validator ini umumnya bertindak sebagai pemroses perubahan.

Contoh Validator Pemroses:

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

Perhatikan sekali lagi bahwa teks tampilan tidak selalu mencerminkan nilai kolom.

Nilai ini

Di dalam validator this merujuk pada kolom, bukan blok. Jika Anda perlu mengakses blok di dalam validator, gunakan fungsi getSourceBlock. Anda juga dapat menggunakan fungsi bind untuk menyetel konteks tempat validator dipanggil.

Kode contoh menggunakan 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);
  }
};

Kode contoh menggunakan 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);
  }
};