个性化阅读
专注于IT技术分析

Polymerjs gold-cc-input元素

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

句法:

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

此元素具有可选标签, 默认情况下为”卡号”, 如下所示-

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

验证方式

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

如果要手动验证, 则可以使用validate()方法, 如果有效, 则返回true;否则返回false(如果无效)。你还可以使用自动验证和必需属性来使输入自动验证。

它包括不同类型的信用卡, 例如amex, diners_club, discover, jcb, laser, Maestro, Mastercard, Visa, Visa_electron等信用卡。这些都是通过cardTypes属性提供的。

例子

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

bower install PolymerElements/gold-cc-input -save
gold-cc-input元素1

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

创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中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/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>

输出

gold-cc-input元素2
赞(0)
未经允许不得转载:srcmini » Polymerjs gold-cc-input元素

评论 抢沙发

评论前必须登录!