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

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

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

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

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

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

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

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

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

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

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

Null ซึ่งหมายความว่าค่าที่ระบุไม่ถูกต้อง ในกรณีส่วนใหญ่ ช่องนี้จะ ไม่สนใจค่าที่ป้อน ลักษณะการทำงานที่แน่นอนจะระบุโดยแท็ก doValueInvalid_ function

ตัวอย่างเครื่องมือตรวจสอบ 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;
};

ค่าการคืนสินค้าที่ไม่ระบุ

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

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

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

โปรดอธิบายอีกครั้งว่าข้อความที่แสดงอาจไม่ได้แสดงถึงฟิลด์ ค่า

ค่าของ

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

ตัวอย่างโค้ดที่ใช้ 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);
  }
};