Polymerjs gold-cc-cvc-input用法 _Polymerjs元素

Polymerjs gold-cc-cvc-input是一种材料设计样式的单行输入, 用于在输入代码时验证信用卡。
句法：

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

这里的CVC是默认标签, 它是可选的。
你也可以通过绑定属性cardType将< gold-cc-input> 与< gold-cc-cvc-input> 一起使用。

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

验证方式对于大多数有效卡, CVC输入接受3位长代码, 但对于有效的美国运通卡, CVC被认为是4位数字。
你可以使用validate()方法手动验证它, 如果该方法有效, 则返回true；否则返回false, 如果无效。你可以使用自动验证和必需属性来使输入自动验证。
例子
运行以下命令以在项目目录中安装gold-cc-cvc-input元素。之后, 你可以在应用程序中使用此元素：

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

文章图片
它将在bower_components文件夹下安装polymer_ gold-cc-cvc-input的所有相关元素。
【Polymerjs gold-cc-cvc-input用法】创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中gold-cc-cvc-input元素的用法。

< !DOCTYPE html> < html> < head> < title> Gold CC CVC 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-cvc-input/gold-cc-cvc-input.html"> < /head> < body> < h3> Pre-validated cvc< /h3> < gold-cc-cvc-input label = "valid cvc" value = "http://www.srcmini.com/586" auto-validate style = "width:30%; display:inline-block; "> < /gold-cc-cvc-input> < br/> < gold-cc-cvc-input label = "invalid cvc" value = "http://www.srcmini.com/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>

输出