@66pix/angular-credit-cards 中文文档教程

Question

angular-credit-cards

一组用于构建信用卡支付表单的 Angular 指令。 使用 creditcards 来解析和验证输入。 与 angular-stripe 或任何其他支付后端完美搭配。 试试吧！

Installation

# use npm
$ npm install angular-credit-cards
# or bower
$ bower install angular-credit-cards

Setup

在模块的依赖项中包含 'angular-credit-cards'：

// node module exports the string 'angular-credit-cards' for convenience
angular.module('myApp', [
  require('angular-credit-cards')
]);
// otherwise, include the code first then the module name
angular.module('myApp', [
  'credit-cards'
]);

如果你'如果想直接使用 creditcards API，您可以将服务作为 creditcards 注入。

API

除了 ccExp 之外，所有指令都需要在其元素上使用 ngModel。 虽然设计为一起使用，但除 ccExp 之外的所有指令都可以完全独立使用。

所有指令都应用数字输入模式，以便移动浏览器使用修改后的版本放大的电话键盘。 您应该对所有 input 元素使用 type="text"。

---

Card Number (cc-number)

<input type="text" ng-model="card.number" cc-number cc-type="cardType" ng-required="true" />

• Can format your inputs into space-delimited groups (e.g. 4242 4242 4242 4242) by adding the cc-format option
• Strips all punctuation and spaces in the model
• Validates the card against the Luhn algorithm
• Checks whether the card is the type(s) specified in scope property in cc-type (optional)
• Otherwise, checks whether the card matches any valid card type
• Exposes the card type as $ccType on the model controller

如果您使用的是 cc-format，您需要应用 novalidate 属性添加到您的

以禁用本机浏览器验证。 用于在移动设备上触发拨号器键盘的输入模式不允许空格，导致实现模式验证的浏览器显示错误工具提示。

cc-type 属性是可选的，可以是单个卡片类型或类型数组。 如果它的值是在作用域上定义的，除了 Luhh 算法之外，卡号将根据类型进行检查。 一个特殊的有效性密钥——ccNumberType——指示该卡是否与指定类型相匹配。 如果未提供类型，ccNumberType 将始终对通过 Luhn 并匹配任何卡片类型的任何卡片有效。

您还可以启用即时卡类型检测以匹配只有前导数字的卡类型（例如 4 可以立即被检测为 Visa）。 将 cc-eager-type 属性添加到您的元素以启用即时类型检测。 急切匹配的类型将在模型控制器上作为 $ccEagerType 提供。

从用户输入中显示卡片类型：

<form name="paymentForm">
  <input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type />
</form>
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
  Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$valid">
  Yes, that looks like a valid {{paymentForm.cardNumber.$ccType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$error.required">
  You must enter a credit card number!
</p>

强制使用 选择特定的卡片类型：

<form name="paymentForm">
  <select ng-model="cardType" ng-options="type for type in ['Visa', 'American Express', 'MasterCard']"></select>
  <input type="text" ng-model="card.number" name="cardNumber" cc-number cc-type="cardType" />
  <p ng-show="paymentForm.cardNumber.$error.ccNumberType">That's not a valid {{cardType}}</p>
</form>

---

CVC (cc-cvc)

<input type="text" ng-model="card.cvc" cc-cvc ng-required="true" />
<input type="text" ng-model="card.cvc" cc-type="cardNumber.$ccType" ng-required="true" />

• Sets maxlength="4"
• Validates the CVC

您可以选择指定将卡片类型存储为 cc-type。 对于美国运通卡，需要 4 位数的 CVC。 对于所有其他卡类型，需要 3 位数字。

---

Expiration (cc-exp, cc-exp-month, cc-exp-year)

<div cc-exp>
  <input ng-model="card.exp_month" cc-exp-month ng-required="true" />
  <input ng-model="card.exp_year" cc-exp-year ng-required="true" />
</div>

cc-exp-month

• Sets maxlength="2"
• Validates the month
• Converts it to a number

cc-exp-year

• Sets maxlength="2" (or 4 with the full-year attribute)
• Converts the year to a 4 digit number ('14' -> 2014), unless full-year is added
• Validates the year
• Validates that the expiration year has not passed

cc-exp

验证月/年对没有通过

cc-exp-month 和 cc-exp-year 应该都放在 input 元素上type="text" 或没有 type 属性。 浏览器的正常最大长度行为（防止在指定字符数后输入并将粘贴的文本截断到该长度）不适用于 type="number"。 这两个指令都将在内部处理将日期组件解析为数字。

cc-exp 必须放在 cc-exp-month 和 cc-exp-year 的父元素上。 因为 ccExp 不是输入，而是直接向表单添加了验证属性，所以您无法将其有效性作为 myForm.ccExp.$valid 访问。 而是使用 myForm.$error.ccExp 来确定是否显示验证错误。

---

Integration

如果您不完全熟悉 Angular 中的表单验证，这些可能会有所帮助：

• Angular Documentation: Forms
• Angular Form Validation (Scotch.io)
• Form validation with AngularJS (ng-newsletter)

angular-credit-cards 设置与指令名称匹配的有效性密钥（ccNumber、ccCvc、 ccExp、ccExpMonth、ccExpYear）。 您可以使用这些键或表单 css 类来显示错误消息。

您还可以尝试现场演示 并试验各种输入，看看它们是如何被验证的。

License

麻省理工学院