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

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

尝试将自定义验证器函数作为属性添加到纸张输入元素，但它根本不会被调用

    <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>

...
聚合物({
是：'自定义元素'，
验证_1：函数（）{
//验证码
},
验证_2：函数（）{
//验证码
}
});

验证程序必须实现

IronValidatorBehavior

（请参阅）。此外，如果要自动验证，则需要设置

自动验证

属性。为了实现您的目标，您可以为要使用的每种验证类型创建一个自定义验证器。或者，您可以创建一个通用的自定义验证器，并在初始化时设置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>

聚合物({ 是：“自定义验证程序”， 行为：[ 高分子材料的性能 ] }); 聚合物({ 是：'验证元素'， validate1：函数（值）{ //验证码 console.log（“validate1”）； 返回值.length>3； }, validate2：函数（值）{ //验证码 console.log（“validate2”）； 返回值.length>5； }, 就绪：函数（）{ this.valid1.validate=this.validate1.bind（this）； this.valid2.validate=this.validate2.bind（this）； } });

---

你可以在这方面找到一个有效的例子。

好的，我的答案可能不是“聚合方式”，但它是有效的，更像是“传统编程”方式

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

纸张输入又名iron输入在iron元全局对象中查找validator属性的值

每个Polymer.ironValidator行为都有一个名称（validatorName）、一个类型（“validator”）和一个验证函数

每个Polymer.ironValidator行为在iron元对象的相应“validator”列表中注册自身

这是我从上面几点得到的一个简短代码：

var验证程序={
validatorName:“我的自定义验证器”，
validator类型：“validator”，
验证：函数（值）{…我的验证代码…}
};
新型高分子材料({
类型：validator.validator类型，
键：validator.validatorName，
值：验证器
});

您可以将此代码放入任何“附加”或“创建”事件处理程序中。但是在任何验证完成之前运行它当然

然后你就可以写了

---

如果您想检查您的验证器是否已注册到输入，请在任何开发工具中向下导航dom树，点击：

$0.hasvalidater（）

和

$0.validator

，查看您的验证器是否已成功注册到输入。

您的示例在我的代码中运行良好。我唯一想提到的是，第一个聚合对象应该放在一个单独的html文件中，就像您在plunk示例中所做的那样。非常感谢。如果validate1和validate2中的返回值在一开始就设置为false，则示例将更清晰。@Maria，如果我将type=“number”设置为纸张输入，则此示例将停止工作。。。例如，前两个点之后的任何输入都不会调用验证函数。因此，可以设置以下内容：“11..212..2..2.2..2…”。您知道如何对type=“number”纸张输入进行验证吗？Thx@31415926我做了一个快速测试，发现如果type设置为

number

，它将不接受任何非数字输入。看见所以我没能用键盘重现你的输入。还是你是通过编程的方式做到的？@Josephui谢谢你的建议。我已经更新了代码（也在plunk中），仅当第一次输入至少4个字符，第二次输入至少6个字符时，才返回

true

。