时间戳

首页 > 解决方案 > FromGroup 中输入掩码的验证

javascript - FromGroup 中输入掩码的验证

问题描述

我得到了信用卡的例子FormGroup，使用 Angular directive，我input mask为输入创建4444444444444444了4444 4444 4444 4444，但问题是我得到了不接受的正则表达式验证space。这是我尝试过的，

ts.文件

  {
    this.creditCardForm = builder.group({
      creditCardNumber: ['', [creditCardNumberValidators]]
    });

  }   
}

function creditCardNumberValidators(c: FormControl) {
  const isVisa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;

  return isVisa.test(c.value)
    ? null
    : {
        validateInput: {
          valid: false,
        },
      };
}



@Directive({
  selector: '[creditCardMask]',
})
export class CreditCardMaskDirective {
  @HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;

    let trimmed = input.value.replace(/\s+/g, '');
    if (trimmed.length > 16) {
      trimmed = trimmed.substr(0, 16);
    }

    const numbers = [];
    for (let i = 0; i < trimmed.length; i += 4) {
      numbers.push(trimmed.substr(i, 4));
    }

    input.value = numbers.join(' ');
  }
}

这是我的stackblitz 演示，根据我的发现，我可以有 2 个解决方案：

需要建议，如果有更好的做法来解决这个问题，谢谢

标签： javascriptangulartypescriptangular-reactive-forms

解决方案

使用您正在使用的相同正则表达式，但在验证之前从卡号中删除空格。

您可以使用String.split()和Array.join()来做到这一点。

function creditCardNumberValidators(c: FormControl) {
  const isVisa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;

  // Remove spaces.
  let cardNumber = c.value.trim().split(' ').join('');

  return isVisa.test(cardNumber)
    ? null
    : {
        validateInput: {
          valid: false,
        },
      };
}

String.replace()也可以用来删除空格。

let cardNumber = c.value.replace(/\s/g, '');

StackBlitz 上的现场演示： https ://stackblitz.com/edit/angular-reactive-forms-12jq6d

推荐阅读