Polymer Gold CC 输入

17 Mar 2025 | 阅读 2 分钟

Polymer Gold CC 输入是一个材料设计的样式输入文本字段。它用于输入信用卡号码。当用户键入代码时，它会在每 4 位数字后添加一个空格。

语法

此元素有一个可选的标签，默认情况下为“卡号”，如下所示 -

验证

我们可以使用 Luhn 校验和来验证输入的信用卡号码是否有效，以及卡的类型。

如果您想手动验证，可以使用 validate() 方法，如果有效则返回 true，如果无效则返回 false。您还可以使用 auto-validate 和 required 属性来使输入自动验证。

它包括不同类型的信用卡，如 amex、diners_club、discover、jcb、laser、maestro、mastercard、visa、visa_electron 等。这些通过 cardTypes 属性提供。

示例

运行以下命令以在您的项目目录中安装 gold-cc-input 元素。之后，您可以在您的应用程序中使用此元素

它将在 bower_components 文件夹下安装 polymer-gold-cc-input 的所有相关元素。

创建一个 index.html 文件并在其中添加以下代码，以查看 gold-cc-input 元素在 Polymer.js 中的用法。

<!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>

输出