โปรแกรมตรวจสอบ

โปรแกรมตรวจสอบคือฟังก์ชันที่จะรับค่าใหม่ในช่อง แล้วดำเนินการกับค่านั้น ซึ่งเป็นวิธีง่ายๆ ในการปรับแต่งช่อง ซึ่งช่วยให้คุณทริกเกอร์ฟังก์ชันการทำงานเมื่อค่าของช่องมีการเปลี่ยนแปลง แก้ไขอินพุต หรือจำกัดค่าที่ยอมรับได้

ตัวอย่างที่พบบ่อยมีดังนี้

• การจำกัดช่องข้อความยอมรับเฉพาะตัวอักษร
• กำหนดให้ช่องข้อความต้องไม่ว่างเปล่า
• กำหนดให้วันที่เป็นวันที่ในอนาคต
• การแก้ไขรูปร่างของบล็อกตามเมนูแบบเลื่อนลง

หมายเหตุ: โปรแกรมตรวจสอบจะแก้ไขค่าของช่อง ไม่ใช่ข้อความ

ประเภทของโปรแกรมตรวจสอบ

โปรแกรมตรวจสอบจะทำงานในเวลาที่ต่างกันโดยขึ้นอยู่กับประเภทของโปรแกรมตรวจสอบ

เครื่องมือตรวจสอบคลาสเป็นส่วนหนึ่งของคำจำกัดความคลาสของประเภทช่อง และมักใช้เพื่อจำกัดประเภทของค่าที่ช่องอนุญาต (เช่น ช่องตัวเลขรองรับอักขระตัวเลขเท่านั้น) เครื่องมือตรวจสอบคลาสจะทำงานกับค่าทั้งหมดที่ส่งไปยังช่อง (รวมถึงค่าที่ส่งไปยังตัวสร้าง)

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือตรวจสอบคลาส โปรดดูส่วนการใช้โปรแกรมตรวจสอบชั้นเรียนในการสร้างช่องที่กำหนดเอง

เครื่องมือตรวจสอบภายในจะกำหนดไว้เมื่ออยู่ระหว่างการปรับปรุงภาคสนาม โปรแกรมตรวจสอบภายในจะทำงานกับค่าทั้งหมดที่ส่งไปยังช่อง ยกเว้นค่าที่ส่งไปยัง เครื่องมือสร้าง ซึ่งหมายความว่าโฆษณาจะทำงานบน

• ค่าที่อยู่ใน 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));
  }
};

• ด้วย setValidator

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 ซึ่งหมายความว่าค่าที่ระบุไม่ถูกต้อง ในกรณีส่วนใหญ่ ช่องนี้จะไม่สนใจค่าที่ป้อน ลักษณะการทำงานที่แน่นอนจะระบุโดย 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;
};

ค่าผลลัพธ์ที่ไม่ได้กำหนด

ไม่ระบุ (หรือไม่ระบุคำสั่ง Return) หรือค่าอินพุตซึ่งหมายความว่าค่าอินพุตควรเป็นค่าใหม่ของช่อง โปรแกรมตรวจสอบประเภทนี้ มักจะทำหน้าที่เป็นผู้ฟังการเปลี่ยนแปลง

ตัวอย่างโปรแกรมตรวจสอบ Listener

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