前端开发中，我们经常需要对信用卡相关信息进行完善的验证，比如信用卡类型、过期时间等。而 ngx-enhance-credit-cards 就是一个非常方便、实用的 npm 包，它能够精确地验证信用卡信息，帮助我们完成这一验证的工作。
简介
ngx-enhance-credit-cards 是一个基于 Angular 框架的 npm 包，它提供了一组能够验证和标准化信用卡信息的指令和服务。它检查卡号和 CVC 号码的有效性以及卡的类型，并可以根据格式化选项自动格式化其文本。ngx-enhance-credit-cards 能够处理自动文本格式化、Masking、验证和标准化卡号等复杂的工作流程，让我们可以更加专注于实现业务逻辑。
安装
安装 ngx-enhance-credit-cards 很简单，我们只需要在项目根目录下使用 npm 命令进行安装即可。
npm install --save ngx-enhance-credit-cards
使用
在组件中导入引用 ngx-enhance-credit-cards 包：
import { NgxEnhanceCreditCardsModule } from 'ngx-enhance-credit-cards';
@NgModule({
imports: [NgxEnhanceCreditCardsModule]
})然后就可以在 HTML 中使用 ngx-enhance-credit-cards 了。
基本用法
ngx-card 指令是 ngx-enhance-credit-cards 中最常用的指令，它可以用于处理信用卡输入框。
<input type="text" name="cardNumber" ngx-card>
在输入框中，每输入一个数字，ngx-enhance-credit-cards 指令就会处理该字符并对其进行格式化。
验证
对于非空的信用卡卡号和 CVC 号码进行验证，是非常重要的一步。ngx-enhance-credit-cards 中提供了一个叫做 NgxEccValidator 的服务，它可以用于验证信用卡信息。我们只需导入该服务并在组件中使用即可。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
------------
--------- -----------
--------- -
----- -------------------------
------ ----------- ----------------- -------- -----------------------------
------ ----------- ---------- ------- ----------------------
-------
--
--
------ ----- ------------ ---------- ------ -
------ ----------- ----------
------------------- --- ------------ ------- ------------- ---------------- --
---------- -
--------------- - ---------------
----------- ---- --------------------- ---------------------------------
---- ---- --------------------- --------------------------------
---
-
-上述代码中，我们使用 NgxEccValidator 服务，并将其传入 Validators 工厂作为第二个参数。
自定义格式化选项
ngx-enhance-credit-cards 可以根据一些格式化选项自动处理输入框中的文本。默认情况下，ngx-enhance-credit-cards 使用 hyphen 作为卡号的分隔符，然而我们可以通过 ngxCardFormat 选项来更改它，比如把 hyphen 改成空格：
<input type="text" name="cardNumber" ngx-card [ngxCardFormat]="' '">
此外，我们也可以更改默认的 CVC 长度和卡类型。比如：
<input type="text" name="cvc" ngx-cvc [ngxCardType]="'americanexpress'" [ngxCardCvcLength]="4">
总结
ngx-enhance-credit-cards 是一个非常实用的 npm 包，在前端开发中有着很广泛的应用。通过 ngx-enhance-credit-cards，我们能够快速对信用卡信息进行验证，自动格式化文本，提高开发效率。期望这篇文章能够帮助读者学会如何使用 ngx-enhance-credit-cards，加深对 ngx-enhance-credit-cards 的理解。详细代码示例请见 https://github.com/yudi123/ngx-enhance-credit-cards-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005756181e8991b448ea555