通过验证处理 Angular 表单控件上的信用卡刷卡输入-解网

问：

我有一个接受信用卡付款的 angular 应用程序。我还有一个信用卡刷卡器，可以用作读卡器。虽然我能够读取信用卡数据，但当刷信用卡时，它会用前 16 个数字填充信用卡输入字段，这些数字不一定是信用卡号，并丢弃其余的。如果我尝试使用键控或更改，我只能获得输入字段中填写的数字，而不是整个滑动数据。在从付款表单中保存和验证数据之前，我有什么方法可以处理数据？

我的付款方式是：

 this.paymentForm = this._fb.group({
        email: ['', [Validators.required, Validators.pattern('(?:[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])')]],
        expirationMonth: ['01', [CreditCardValidators.validateExpDate]],
        expirationYear: ['2024', [CreditCardValidators.validateExpDate]],
        cvv: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]],
        creditCard: ['', [CreditCardValidators.validateCCNumber]],
    });

cc 输入的 HTML 为：

  <div>
    <label for="cc-number">Card Number</label>
    <input matInput id="cc-number" (input)="processCard($event)" formControlName="creditCard" class="input-cart-number"
    type="num" autocomplete="cc-number" ccNumber name='cardNumber' autofocus placeholder="XXXX XXXX XXXX XXXX" length="16" style="width: 280px; font-size: 15px;"/>
    <br>
    <mat-error *ngIf="f.creditCard.errors && f.creditCard.touched">Card number is <strong>required</strong>
    </mat-error>
  </div>

processCard 事件为：

 processCard(event){
  console.log('cc ' +JSON.stringify(event));
 }

从 thus 事件中，我想获取完整的滑动文本值。我可以使用 event.target.value，但它将返回表单控制值，该值具有验证器，并且仅读取前 16 个数字并砍掉其余数字。

刷卡时的银行卡数据返回为：

%B6011361000006668^DISCOVER TESTCARD/DEVKIT^251210123456789?;**6011361000006668=2512**10123456789?

综上所述，卡号为6011361000006668，到期日为12/25。

JavaScript Angular 表单验证信用卡

<div>
   <label for="cc-number">Card Number</label>
   <input matInput id="cc-number" (change)="processCard($event)" formControlName="creditCard" class="input-cart-number" type="num" autocomplete="cc-number"  name='cardNumber' autofocus placeholder="XXXX XXXX XXXX XXXX" style="width: 280px; font-size: 15px;"/>
   <br>
   <mat-error *ngIf="f.creditCard.errors && f.creditCard.touched">
                            Card number is <strong>required</strong>
   </mat-error>
</div>


 processCard(event){
  if(event.target.value.length > 16 && event.target.value.includes('%')) {
    let ccNumber = Number(event.target.value.split('=')[0].substring(event.target.value.split('=')[0].length - 16));
    let expMonth = event.target.value.split('=')[1].substring(2,4);
    let expYear = event.target.value.split('=')[1].substring(0,2);
    this.f.creditCard.setValue(ccNumber);
    this.f.expirationMonth.setValue(expMonth);
    this.f.expirationYear.setValue(20 +expYear);
    document.getElementById('cc-cvc').focus();
  } else if(event.target.value.length === 16 && event.key !== 'Backspace') {
    event.preventDefault();
  }

}

上一个：为什么 angular 表单自定义验证不起作用？[已解决]

下一个：如何在 Angular14 中使用 angular material input 创建带有验证的自定义输入组件？

通过验证处理 Angular 表单控件上的信用卡刷卡输入

Process Credit Card Swipe Input On Angular Form Control With Validation

评论