โปรแกรมตรวจสอบคือฟังก์ชันที่จะรับค่าใหม่ในช่อง แล้วดำเนินการกับค่านั้น ซึ่งเป็นวิธีง่ายๆ ในการปรับแต่งช่อง ซึ่งช่วยให้คุณทริกเกอร์ฟังก์ชันการทำงานเมื่อค่าของช่องมีการเปลี่ยนแปลง แก้ไขอินพุต หรือจำกัดค่าที่ยอมรับได้
ตัวอย่างที่พบบ่อยมีดังนี้
- การจำกัดช่องข้อความยอมรับเฉพาะตัวอักษร
- กำหนดให้ช่องข้อความต้องไม่ว่างเปล่า
- กำหนดให้วันที่เป็นวันที่ในอนาคต
- การแก้ไขรูปร่างของบล็อกตามเมนูแบบเลื่อนลง
ประเภทของโปรแกรมตรวจสอบ
โปรแกรมตรวจสอบจะทำงานในเวลาที่ต่างกันโดยขึ้นอยู่กับประเภทของโปรแกรมตรวจสอบ
เครื่องมือตรวจสอบคลาสเป็นส่วนหนึ่งของคำจำกัดความคลาสของประเภทช่อง และมักใช้เพื่อจำกัดประเภทของค่าที่ช่องอนุญาต (เช่น ช่องตัวเลขรองรับอักขระตัวเลขเท่านั้น) เครื่องมือตรวจสอบคลาสจะทำงานกับค่าทั้งหมดที่ส่งไปยังช่อง (รวมถึงค่าที่ส่งไปยังตัวสร้าง)
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือตรวจสอบคลาส โปรดดูส่วนการใช้โปรแกรมตรวจสอบชั้นเรียนในการสร้างช่องที่กำหนดเอง
เครื่องมือตรวจสอบภายในจะกำหนดไว้เมื่ออยู่ระหว่างการปรับปรุงภาคสนาม โปรแกรมตรวจสอบภายในจะทำงานกับค่าทั้งหมดที่ส่งไปยังช่อง ยกเว้นค่าที่ส่งไปยัง เครื่องมือสร้าง ซึ่งหมายความว่าโฆษณาจะทำงานบน
- ค่าที่อยู่ใน 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);
}
};