如何将自定义验证器添加到纸张输入？

Question

需要添加一个自定义验证器，它根据 html 中其他字段的值进行一些复杂的验证。

尝试将自定义验证器函数作为属性添加到 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>

Answer 1

验证器必须实现 IronValidatorBehavior（参见 docs）。另外，如果你想自动验证，你需要设置 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>

您可以在此 plunk 中找到一个工作示例。

Answer 2

好吧，我的回答可能不是 "Polymer way" 但它确实有效，而且更像是 "traditional programmatic" 方式。

此解决方案的简短想法列表：

paper-input aka iron-input 在 iron-meta 全局对象中查找验证器属性的值
每个 Polymer.IronValidatorBehavior 都有一个名称 (validatorName)、一个类型 ('validator') 和一个验证函数
每个 Polymer.IronValidatorBehavior 都在 iron-meta 对象的相应 'validator' 列表中注册自己

所以这是我根据以上几点得出的简短代码：

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

您可以将此代码放在任何 'attached' 或 'created' 事件处理程序中。但是运行它当然是在任何验证完成之前...

那你可以写

<paper-input validator="my-custom-validator"></paper-input>

如果你想检查你的验证器是否注册了输入，在任何开发工具中向下导航 dom-树并点击：[=12=].hasValidator() 和 [=13=].validator 看看是否您的验证器已成功注册输入。

如何将自定义验证器添加到纸张输入？

How to add custom validator to paper-input?

html

javascript

polymer

polymer-1.0