javascript 如何将自定义验证器添加到纸张输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31955091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add custom validator to paper-input?
提问by AKh
Need to add a custom validator which does some complex validation based on the values of other fields in the html.
需要添加一个自定义验证器，它根据 html 中其他字段的值进行一些复杂的验证。
Tried adding custom validator function as an attribute to the paper-input element but it wont get calledat all.
尝试将自定义验证器函数作为属性添加到 paper-input 元素，但它根本 不会被调用。
<dom-module id='custom-ele'>
<paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input>
<paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input>
...
</dom-module>
<script>
Polymer({
is: 'custom-ele',
validate_1: function() {
//validation code
},
validate_2: function() {
//validation code
}
});
</script>
回答by Maria
The validator has to implement IronValidatorBehavior(see docs). Also, if you want to validate automatically, you need to set the auto-validateattribute. To achieve your goal you could create a custom validator for each type of validation that you want to use. Alternatively, you could create a generic custom validator and set the validate function upon initialisation. Here's an example.
验证器必须实现IronValidatorBehavior（参见文档）。另外，如果要自动验证，则需要设置该auto-validate属性。为了实现您的目标，您可以为要使用的每种验证类型创建一个自定义验证器。或者，您可以创建一个通用的自定义验证器并在初始化时设置验证函数。这是一个例子。
Polymer({
is: 'custom-validator',
behaviors: [
Polymer.IronValidatorBehavior
]
});
<dom-module id='validation-element'>
<template>
<custom-validator id="valid1" validator-name="validator1"></custom-validator>
<custom-validator id="valid2" validator-name="validator2"></custom-validator>
<paper-input auto-validate id='input_1' label='Label_1' validator='validator1'></paper-input>
<paper-input auto-validate id='input_2' label='Label_2' validator='validator2'></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: 'validation-element',
validate1: function(value) {
//validation code
console.log("validate1");
return value.length > 3;
},
validate2: function(value) {
//validation code
console.log("validate2");
return value.length > 5;
},
ready: function() {
this.$.valid1.validate = this.validate1.bind(this);
this.$.valid2.validate = this.validate2.bind(this);
}
});
</script>
You can find a working example in this plunk.
您可以在这个plunk 中找到一个工作示例。
回答by Kjell
Ok, my answer might not be the "Polymer way" but it works and is more the "traditional programmatic" way.
好吧，我的答案可能不是“聚合物方式”，但它有效，而且更像是“传统的程序化”方式。
The short list of ideas for this solution:
此解决方案的简短想法列表：
- paper-input aka iron-input look-up the value of the validator attribute in the iron-meta global object
- Each Polymer.IronValidatorBehavior has a name (validatorName), a type ('validator') and a validate function
- Each Polymer.IronValidatorBehavior registers itself in the corresponding 'validator' list in the iron-meta object
- paper-input aka iron-input 在铁元全局对象中查找验证器属性的值
- 每个 Polymer.IronValidatorBehavior 都有一个名称 (validatorName)、一个类型 ('validator') 和一个验证函数
- 每个 Polymer.IronValidatorBehavior 在铁元对象中相应的“验证器”列表中注册自己
So this is a short code I derived from the points above:
所以这是我从以上几点得出的简短代码：
var validator = {
validatorName: 'my-custom-validator',
validatorType: 'validator',
validate: function(value) { ...my validation code... }
};
new Polymer.IronMeta({
type: validator.validatorType,
key: validator.validatorName,
value: validator
});
You can put this code in any 'attached' or 'created' event handler. But run it before any validation is done of course...
您可以将此代码放在任何“附加”或“创建”事件处理程序中。但是在任何验证完成之前运行它当然......
Then you can write
然后你可以写
<paper-input validator="my-custom-validator"></paper-input>
If you wanna check if your validator is register with the input, navigate down the dom-tree in any dev-tool and hit: $0.hasValidator()and $0.validatorto see if your validator has been successfully registered with the input.
如果您想检查您的验证器是否已注册输入，请在任何开发工具中向下导航 dom-tree 并点击：$0.hasValidator()并$0.validator查看您的验证器是否已成功注册到输入。
