如何将自定义验证器添加到纸张输入？ [英] How to add custom validator to paper-input?

问题描述

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

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

 < dom-module id ='custom-ele'> 
< paper-input is =iron-inputid ='input_1'label ='Label_1'validator ='validate_1'>< / paper-input> 
< paper-input is =iron-inputid ='input_2'label ='Label_2'validator ='validate_2'>< / paper-input> 
 ... 
< / dom-module> 
< script> 
 Polymer（{
 
是：'custom-ele'，
 
 validate_1：function（）{
 //验证码
} ，
 
 validate_2：function（）{
 //验证码
} 
 
}）; 
< / script> 
  

解决方案

验证器必须实现 IronValidatorBehavior （请参阅文档）。另外，如果你想自动验证，你需要设置自动验证属性。要实现您的目标，您可以为要使用的每种验证类型创建一个自定义验证器。或者，您可以创建通用定制验证器并在初始化时设置验证功能。下面是一个例子。

 聚合物（{
 
是：'custom-validator'，
 
行为：[
 Polymer.IronValidatorBehavior 
] 
}）; 
 
< dom-module id ='validation-element'> 
< template> 
< custom-validator id =valid1validator-name =validator1>< / custom-validator> 
< custom-validator id =valid2validator-name =validator2>< / custom-validator> 
 < paper-input auto-validate id ='input_2'label ='Label_2'validator ='validator2'>< / paper-input> 
< / template> 
< / dom-module> 
< script> 
 
聚合物（{
 
是：'validation-element'，
 
 validate1：​​function（value）{
 //验证码
 console.log（validate1）; 
返回value.length> 3; 
}，
 
 validate2：function（value）{
 //验证码
 console.log（validate2）; 
返回value.length> 5; 
}，
 
 ready：function（）{
 this。$。valid1.validate = this.validate1.bind（this）; 
 this。$。valid2.validate = this.validate2.bind（this）; 
} 
 
}）; 
 
< / script> 
  

你可以在这个 plunk 。

Need to add a custom validator which does some complex validation based on the values of other fields in the html.

Tried adding custom validator function as an attribute to the paper-input element but it wont get called at all.

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

解决方案

The validator has to implement IronValidatorBehavior (see docs). Also, if you want to validate automatically, you need to set the auto-validate attribute. 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.

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.

这篇关于如何将自定义验证器添加到纸张输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！