验证程序是一个函数,用于接收字段新值,然后对其进行操作。它们是自定义字段的一种简单方式。可让您在字段的值发生变化时触发功能、修改输入或限制可接受的值。
一些常见示例:
- 将文本字段限制为仅接受字母。
- 要求文本字段不得为空。
- 要求选择将来的日期。
- 根据下拉菜单修改块的形状。
验证程序类型
验证器的执行时间不尽相同,具体取决于验证器的类型。
类验证器是字段类型的类定义的一部分,通常用于限制字段允许的值的类型(例如,数字字段仅接受数字字符)。类验证程序会针对传递给该字段的所有值(包括传递给构造函数的值)运行。
如需详细了解类验证器,请参阅“创建自定义字段”中的实现类验证器部分。
本地验证器是在构建字段时定义的。本地验证器会针对传递给该字段的所有值运行,除了传递给构造函数的值。这意味着,这些测试的运行位置如下:
- XML 中包含的值。
- 传递给 setValue 的值。
- 传递给 setFieldValue 的值。
- 用户更改的值。
类验证程序先于本地验证程序运行,因为它们的作用类似于把关程序。它们会确保值的类型正确无误,然后再进行传递。
如需详细了解值验证序列以及一般值,请参阅“值”。
注册本地验证器
本地验证程序可通过以下两种方式注册:
- 直接添加到字段的构造函数中。
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 格式。
根据要验证的字段的类型,该字段的值可能差异很大(例如,数字字段将存储数字,而文本输入字段将存储字符串),因此最好在创建验证程序之前阅读特定字段的文档。
返回值
验证器的返回值将决定字段的下一步操作。有三种可能性:
修改后的返回值
修改后的值或其他值,然后成为字段的新值。 这通常用于清理值,例如通过移除尾随空白。
修改验证工具示例:
// Remove all 'a' characters from the text input's value.
var validator = function(newValue) {
return newValue.replace(/\a/g, '');
};
Null 返回值
null,表示指定值无效。在大多数情况下,该字段会忽略输入值。确切的行为由该字段的 doValueInvalid_
函数指定。
Null 验证工具示例:
// 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);
}
};