Polymère - Entrée Gold CC

<gold-cc-input> est un champ de texte d'entrée de style Material Design permettant de saisir un numéro de carte de crédit. Au fur et à mesure que l'utilisateur tape un nombre, un espace sera ajouté tous les 4 chiffres.

Syntaxe

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

Cet élément a une étiquette facultative, qui est le "numéro de carte" par défaut comme indiqué ci-dessous -

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

Validation

À l'aide de la somme de contrôle Luhn, le numéro de carte de crédit saisi est détecté, qu'il soit valide ou non, ainsi que le type de carte.

Pour valider manuellement, vous pouvez utiliser validate()méthode qui renvoie true si elle est valide ou sinon false, si elle n'est pas valide. L'utilisation deauto-validate et required les attributs provoquent la validation automatique de l'entrée.

Une liste de types de cartes de crédit tels que amex, diners_club, discover, jcb, laser, maestro, mastercard, visa, visa_electron sont fournis par la propriété cardTypes.

coiffant

Pour styliser cet élément, voir Polymer.PaperInputContainerpour une liste de propriétés personnalisées.

La propriété personnalisée utilisée pour styliser cet élément est la suivante -

----gold-cc-input-icon-container- Définit le mixin pour personnaliser le conteneur d'icônes. La valeur par défaut est {}.

Exemple

Pour utiliser l'élément gold-cc-input, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

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

La commande ci-dessus installe l'élément gold-cc-input dans le dossier bower_components. Ensuite, importez le fichier gold-cc-input dans votre index.html à l'aide de la commande suivante

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

Le programme suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.