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

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

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

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

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

ประเภทของเครื่องมือตรวจสอบ

ผู้ตรวจสอบจะดำเนินการในเวลาที่ต่างกันไปตามประเภทของผู้ตรวจสอบ

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

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

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

• ค่าที่อยู่ใน 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 รูปแบบ ดังนี้

มูลค่าผลตอบแทนที่แก้ไขแล้ว

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

ตัวอย่างของ Modifying Validator

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

ค่าที่ส่งคืนเป็น Null

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

ตัวอย่างเครื่องมือตรวจสอบค่าว่าง

// 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) หรือค่าอินพุต ซึ่งหมายความว่าค่าอินพุตควรกลายเป็นค่าใหม่ของฟิลด์ โดยทั่วไปแล้วเครื่องมือตรวจสอบประเภทเหล่านี้ จะทำหน้าที่เป็นเครื่องมือฟังการเปลี่ยนแปลง

ตัวอย่างเครื่องมือตรวจสอบผู้ฟัง

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