如何在紙張輸入中添加自定義驗證器？

Question

需要添加一個自定義驗證器，它根據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>

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>

你可以在這個插件中找到一個有效的例子。

Answer 2

好吧，我的答案可能不是“聚合物方式”，但它有效並且更像是“傳統的程序化”方式。

這個解決方案的簡短想法列表：

1. paper-input aka iron-input查找iron-meta全局對象中validator屬性的值
2. 每個Polymer.IronValidatorBehavior都有一個名稱（validatorName），一個類型（'validator'）和一個驗證函數
3. 每個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
});

您可以將此代碼放在任何“附加”或“已創建”事件處理程序中。 但是在完成任何驗證之前運行它當然......

然后你就可以寫了

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

如果您想檢查您的驗證器是否注冊了輸入，請在任何開發工具中向下導航dom-tree並點擊： $0.hasValidator()和$0.validator以查看您的驗證器是否已成功注冊輸入。