Wie wird ein benutzerdefinierter Validator zur Papiereingabe hinzugefügt?

Question

Sie müssen einen benutzerdefinierten Validator hinzufügen, der eine komplexe Validierung basierend auf den Werten anderer Felder im HTML durchführt.

Versucht, eine benutzerdefinierte Validator-Funktion als Attribut zum Papiereingabeelement hinzuzufügen, aber wird überhaupt nicht als bezeichnet.

<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

Der Validator hat IronValidatorBehavior zu implementieren (siehe docs). Wenn Sie die Validierung automatisch durchführen möchten, müssen Sie das Attribut auto-validate festlegen. Um Ihr Ziel zu erreichen, können Sie einen benutzerdefinierten Validator für jede Art von Validierung erstellen, die Sie verwenden möchten. Alternativ können Sie einen generischen benutzerdefinierten Validator erstellen und die Validierungsfunktion bei der Initialisierung festlegen. Hier ist ein Beispiel.

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> 

Sie können ein funktionierendes Beispiel in diesem plunk finden.

Answer 2

Ok, meine Antwort ist vielleicht nicht der "Polymer Weg", aber es funktioniert und ist mehr der "traditionelle programmatische" Weg.

Die kurze Liste von Ideen für diese Lösung:

1. Papier-Eingang auch bekannt als den Wert des Prüfers Attributs in dem Eisen-meta globalen Objekt Eisen-Eingang Nachschau
2. Jeden Polymer.IronValidatorBehavior hat ein Name (validatorName), ein Typ ('validator') und eine Validieren Funktion
3. Jeder Polymer.IronValidatorBehavior selbst Register in der entsprechenden 'validator Liste in dem Eisen-Metaobjekt

Das ist also ein kurzer Code, den ich von den Punkten oben abgeleitet:

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 
}); 

Sie können diesen Code setzen in jedem ‚angebracht‘ oder ‚erstellt‘ Event-Handler. Aber es läuft, bevor eine Validierung natürlich getan wird ...

Dann können Sie

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

schreiben Wenn Sie wollen überprüfen, ob Ihr Validator ist mit dem Eingangsregister, navigieren Sie den dom-Baum in jedes Dev-Tool und hit: $0.hasValidator() und $0.validator, um zu sehen, ob Ihr Validator erfolgreich mit der Eingabe registriert wurde.