Polymer-gold-cc-cvc-input
ポリマー-ゴールドCC CVC入力
<gold-cc-cvc-input>は、クレジットカードの確認コードを入力するためのマテリアルデザインスタイルの単一行入力フィールドです。
構文
この要素にはオプションのラベルがあり、次のコードスニペットに示すように、デフォルトでは「CVC」です。
<gold-cc-cvc-input label = "cvc"></gold-cc-cvc-input>プロパティ cardType をバインドすることにより、<gold-cc-input>を<gold-cc-cvc-input>とともに使用することもできます。
<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>検証
入力は、ほとんどの有効なカードに対して3桁の長さのCVCを受け入れますが、有効なアメリカンエクスプレスCVCの場合、4桁と見なされ、それ以外の場合は3桁と見なされます。
手動で検証するには、有効な場合はtrue、無効な場合はfalseを返す* validate（）メソッドを使用できます。 *auto-validate および required 属性を使用すると、入力が自動的に検証されます。
スタイリング
この要素のスタイルを設定するには、 Polymer.PaperInputContainer でカスタムプロパティのリストをご覧ください。
例
gold-cc-cvc-input要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。
bower install PolymerElements/gold-cc-cvc-input --save上記のコマンドは、bower_componentsフォルダーにgold-cc-cvc-inputエレメントをインストールします。 次に、次のコマンドを使用して、indexlにgold-cc-cvc-inputファイルをインポートします。
<link rel = "import"
href = "/bower_components/gold-cc-cvc-input/gold-cc-cvc-inputl">次のプログラムは、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/polymerl">
<link rel = "import"
href = "bower_components/gold-cc-cvc-input/gold-cc-cvc-inputl">
</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>出力
アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。
polymer serveここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。
