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 = "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>
输出
评论前必须登录!
注册