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

<gold-cc-input>は、クレジットカード番号を入力するためのマテリアルデザインスタイルの入力テキストフィールドです。ユーザーが数字を入力すると、4桁ごとにスペースが追加されます。

構文

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

この要素にはオプションのラベルがあり、以下に示すようにデフォルトで「カード番号」です-

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

検証

Luhnチェックサムを使用して、入力されたクレジットカード番号は、カードのタイプとともに有効か無効かを検出します。

手動で検証するには、有効な場合はtrue、無効な場合はfalseを返す* validate（）メソッドを使用できます。 *auto-validate および required 属性を使用すると、入力が自動的に検証されます。

*amex、diners_club、discover、jcb、laser、maestro、mastercard、visa、visa_electron* などのクレジットカードタイプのリストは、cardTypesプロパティを通じて提供されます。

スタイリング

この要素のスタイルを設定するには、* Polymer.PaperInputContainer *のカスタムプロパティのリストを参照してください。

この要素をスタイルするために使用されるカスタムプロパティは次のとおりです-

---- gold-cc-input-icon-container -アイコンコンテナをカスタマイズするためのミックスインを定義します。デフォルト値は\ {}です。

例

gold-cc-input要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。

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

上記のコマンドは、bower_componentsフォルダーにgold-cc-input要素をインストールします。次に、次のコマンドを使用して、index-lにgold-cc-inputファイルをインポートします

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

次のプログラムは、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/polymerl">
      <link rel = "import" href = "bower_components/gold-cc-input/gold-cc-inputl">
   </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>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ゴールドCC入力

Polymer-gold-cc-input

目次

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

構文

検証

スタイリング

例

出力