web-dev-qa-db-ja.com

紙の入力にカスタムバリデーターを追加するにはどうすればよいですか？

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>
javascripthtmlpolymerpolymer-1.0
11
AKh

バリデーターは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 で実用的な例を見つけることができます。

14
Maria

わかりました。私の答えは「ポリマー方式」ではないかもしれませんが、それは機能し、より「従来のプログラマティック」方式です。

このソリューションのアイデアの短いリスト：

  1. paper-input別名iron-inputルックアップ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-toolでdom-treeを下に移動し、$0.hasValidator()および_$0.validator_を押して、バリデーターが正常に登録されているかどうかを確認します。入力。

7
Kjell