Polymerjs gold-cc-input元素 _Polymerjs元素

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

文章图片
它将在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 = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/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 = "http://www.srcmini.com/4111111111111111" style = "width:40%; display:inline-block; "> < /gold-cc-input> < br/> < gold-cc-input label = "Invalid Visa" auto-validate value = "http://www.srcmini.com/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>

【Polymerjs gold-cc-input元素】输出