Polimero - Ingresso CC oro

<gold-cc-input> è un campo di testo di input in stile Material Design per inserire un numero di carta di credito. Man mano che l'utente digita un numero, viene aggiunto uno spazio ogni 4 cifre.

Sintassi

<gold-cc-input></gold-cc-input>

Questo elemento ha un'etichetta opzionale, che è il "numero di carta" per impostazione predefinita, come mostrato di seguito -

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

Validazione

Utilizzando il checksum Luhn, il numero di carta di credito inserito viene rilevato se è valido o non valido insieme al tipo di carta.

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.

Un elenco di tipi di carte di credito come amex, diners_club, discover, jcb, laser, maestro, mastercard, visa, visa_electron sono forniti tramite la proprietà cardTypes.

messa in piega

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

La proprietà personalizzata utilizzata per definire lo stile di questo elemento è la seguente:

  • ----gold-cc-input-icon-container- Definisce il mixin per personalizzare il contenitore delle icone. Il valore predefinito è {}.

Esempio

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

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

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

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC 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-input/gold-cc-input.html">
   </head>

   <body>
      <h3>Pre-validated credit card numbers</h3>
      <gold-cc-input 
         label = "Visa" 
         auto-validate 
         value = "4111111111111111" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input><br/>
	
      <gold-cc-input 
         label = "Invalid Visa" 
         auto-validate 
         value = "4111 1111 1111 0021" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
	
      <h3>Displayes error message for wrong number</h3>
      <gold-cc-input 
         label = "Enter a credit card number" 
         auto-validate 
         error-message = "Please enter a valid credit card number" 
         style = "width:40%; display:inline-block;">
      </gold-cc-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.