Polymère - Entrée CVC Gold CC
<gold-cc-cvc-input> est un champ de saisie sur une seule ligne de style Material Design pour saisir le code de vérification d'une carte de crédit.
Syntaxe
Cet élément a une étiquette facultative, qui est "CVC" par défaut, comme indiqué dans l'extrait de code suivant.
<gold-cc-cvc-input label = "cvc"></gold-cc-cvc-input>Vous pouvez également utiliser <gold-cc-input> avec <gold-cc-cvc-input> en liant la propriété cardType.
<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>Validation
L'entrée accepte 3 chiffres CVC pour la plupart des cartes valides, mais pour American Express valide CVC est considéré comme 4 chiffres, et 3 chiffres sinon.
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.
Coiffant
Pour styliser cet élément, voir Polymer.PaperInputContainer pour une liste de propriétés personnalisées.
Exemple
Pour utiliser l'élément gold-cc-cvc-input, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.
bower install PolymerElements/gold-cc-cvc-input --saveLa commande ci-dessus installe l'élément gold-cc-cvc-input dans le dossier bower_components. Ensuite, importez le fichier gold-cc-cvc-input dans votre index.html à l'aide de la commande suivante.
<link rel = "import"
href = "/bower_components/gold-cc-cvc-input/gold-cc-cvc-input.html">Le programme suivant illustre l'utilisation de l'élément 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>Production
Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.
polymer serveOuvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.
