ポリマー-ゴールド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/ に移動します。出力は次のようになります。

ゴールドCC CVC入力

Polymer-gold-cc-cvc-input

ポリマー-ゴールドCC CVC入力

構文

検証

スタイリング

例

出力

目次