Polymer Gold CC CVC 输入

17 Mar 2025 | 阅读 2 分钟

polymer gold-cc-cvc 输入是一个 material design 风格的单行输入，用于在您输入代码时验证信用卡。

语法

这里 CVC 是一个可选的默认标签。

您还可以将 <gold-cc-input> 与 <gold-cc-cvc-input> 一起使用，方法是绑定 cardType 属性。

<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>

验证

CVC 输入接受 3 位数的长代码用于大多数有效卡，但对于有效的 American Express，CVC 被认为是 4 位数。

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

示例

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

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

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

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

输出