srcminiPolymerjs 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的所有相关元素。
创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中gold-cc-cvc-input元素的用法。
<!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>输出
评论前必须登录！
注册