Вопрос: Как добавить пользовательский валидатор к вводу бумаги?


Необходимо добавить настраиваемый валидатор, который выполняет некоторую сложную проверку, основанную на значениях других полей в 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>

9


источник


Ответы:


Валидатор должен реализовать 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>

Вы можете найти рабочий пример в этом шлепнуть ,


13



Хорошо, мой ответ может быть не «Полимерным способом», но он работает и является более «традиционным программным» способом.

Краткий список идей для этого решения:

  1. paper-input aka iron-input ищет значение атрибута validator в глобальном объекте iron-meta
  2. Каждый Polymer.IronValidatorBehavior имеет имя (validatorName), тип ('validator') и функцию проверки
  3. Каждый Polymer.IronValidatorBehavior регистрируется в соответствующем списке «валидатор» в объекте iron-meta

Итак, это короткий код, который я получил из вышеприведенных пунктов:

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>

Если вы хотите проверить, зарегистрирован ли ваш валидатор на входе, пройдите вниз по дереву в любом инструменте dev и нажмите: $0.hasValidator() а также $0.validator чтобы проверить, был ли ваш валидатор успешно зарегистрирован на входе.


7