Polimero - Ingresso CVC CC oro

<gold-cc-cvc-input> è un campo di input a riga singola in stile Material Design per l'inserimento del codice di verifica di una carta di credito.

Sintassi

Questo elemento ha un'etichetta facoltativa, che è "CVC" per impostazione predefinita, come mostrato nel seguente frammento di codice.

<gold-cc-cvc-input label = "cvc"></gold-cc-cvc-input>

Puoi anche utilizzare <gold-cc-input> insieme a <gold-cc-cvc-input> associando la proprietà cardType.

<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>

Validazione

L'input accetta un CVC di 3 cifre per la maggior parte delle carte valide, ma per American Express valido il CVC è considerato di 4 cifre e 3 cifre altrimenti.

Per convalidare manualmente, puoi utilizzare validate()metodo che restituisce true se è valido o altrimenti false, se non è valido. L'uso diauto-validate e required gli attributi determinano la convalida automatica dell'input.

Messa in piega

Per modellare questo elemento, vedere Polymer.PaperInputContainer per un elenco di proprietà personalizzate.

Esempio

Per utilizzare l'elemento gold-cc-cvc-input, accedere alla cartella del progetto nel prompt dei comandi e utilizzare il comando seguente.

bower install PolymerElements/gold-cc-cvc-input --save

Il comando precedente installa l'elemento gold-cc-cvc-input nella cartella bower_components. Successivamente, importa il file gold-cc-cvc-input nel tuo index.html utilizzando il seguente comando.

<link rel = "import" 
   href = "/bower_components/gold-cc-cvc-input/gold-cc-cvc-input.html">

Il seguente programma dimostra l'uso dell'elemento gold-cc-cvc-input.

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC CVC Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" 
         href = "bower_components/gold-cc-cvc-input/gold-cc-cvc-input.html">
   </head>

   <body>
      <h3>Pre-validated cvc</h3>
      <gold-cc-cvc-input
         label = "valid cvc"
         value = "586"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input><br/>

      <gold-cc-cvc-input
         label = "invalid cvc"
         value = "55"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input>	
	
      <h3>Displays custom error message</h3>
      <gold-cc-cvc-input 
         label = "Enter a cvc" 
         auto-validate 
         error-message = "Please enter a valid cvc" 
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input>
   </body>
</html>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.