使用角度反应形式进行信用卡验证

Question

如何根据信用卡类型验证信用卡号？

我正在设计表格，其中我有两个字段，第一个字段显示信用卡的类型，第二个字段用于信用卡号。如何根据信用卡类型验证信用卡号？我知道自定义validatorcreditcardnumber字段并从regex进行验证，但是当用户更改信用卡类型时，validatorcreditcardnumber将不会致电。

我不想FormGroup级别设置validator，因为我的表单包含 50+ 属性，这就是性能瓶颈(我相信(。 有没有其他方法可以实现这一目标？

请帮忙。

Answer 1

也可以使用 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;
}

Answer 2

你可以通过使用一些 npm 包来简化你的东西， https://www.npmjs.com/package/ngx-credit-cards

Answer 3

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

默认情况下，所有验证器都在每次表单值更改后运行...我们可以通过将 updateOn 属性从更改(默认值(更改为提交或模糊来延迟更新表单有效性

在此之后，您可以使用 setValidators 更改验证，仅在 cardType 的更改中应用

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

或者创建一个自定义验证器，获取两个值(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;
}
}

或者在 Form： https://angular.io/guide/form-validation#cross-field-validation 级别创建一个自定义验证器