角反应形式的信用卡验证

时间:2018-10-19 04:07:43

标签: angular angular-reactive-forms

如何根据信用卡类型验证信用卡号。我正在设计表格,其中有两个字段CreditCard type和Credit Card Number。如何根据信用卡类型验证信用卡号。我知道自定义验证器可应用于creditcardnumber字段并通过正则表达式进行验证,但是当用户更改信用卡类型时,creditcardnumber验证器将不会调用。我不想在FormGroup级别上设置验证器,因为我的表单包含50多个属性,这就是性能瓶颈(我相信)。 有没有其他方法可以实现这一目标。

请帮助。

3 个答案:

答案 0 :(得分:2)

还可以使用Luhn算法进行基本验证。

它并非旨在成为加密安全的哈希函数;它旨在防止意外错误,而不是恶意攻击。大多数信用卡和许多政府识别码都使用该算法作为区分有效号码和输入错误或错误号码的简单方法。

https://en.wikipedia.org/wiki/Luhn_algorithm

function isValid(digits) {
    let sum = 0;

    for (let i = 0; i < digits.length; i++) {
        let cardNum = parseInt(digits[i]);

        if ((digits.length - i) % 2 === 0) {
            cardNum = cardNum * 2;

            if (cardNum > 9) {
                cardNum = cardNum - 9;
            }
        }

        sum += cardNum;
    }

    return sum % 10 === 0;
}

答案 1 :(得分:0)

您可以使用一些npm软件包来简化内容, https://www.npmjs.com/package/ngx-credit-cards

答案 2 :(得分:0)

形成https://angular.io/guide/form-validation#note-on-performance

  

默认情况下,所有验证器都在每次更改表单值之后运行...我们可以通过将updateOn属性从change(默认)更改为Submit或blur来延迟更新表单有效性

此后,您可以使用setValidators更改验证,仅将其应用于cardType更改

this.form.get('cardType').valueChanges.subscribe(cardType=> {
      switch (cardType)
      {
          case 1:
             this.form.get('cardNumber').setValidators(.....);
             break;
          ...
      }

      this.form.get('cardNumber').updateValueAndValidity();
});

或制作一个customValidator来获取两个值(cardType和cardNumber)

customValidator2(params: any) {
    return (control: AbstractControl) => {
      let form=control.parent;
      if (form)
      {
        let cardType=form.get('cardType').value;
        let cardNumber=form.get('cardNumber').value;
        switch (cardType)
        {
              case 1:
                 ....
                 break;
         }
      return null;
    }
  }

或以https://angular.io/guide/form-validation#cross-field-validation格式创建一个customValidator