Vue Credit Card Validation Example

Card Number:

{{ cardErrors.cardNumber }}

Card Expiration:

{{ cardErrors.cardExpiry }}

Card CVC:

{{ cardErrors.cardCvc }}

Restrict Numeric:

Computed Values

Card Brand: (awating input...){{ cardBrand }}
Brand Classname: {{ cardBrandClass }}
Number: {{ cardNumber }}
Expiration: {{ cardExpiry }}

Validation Errors:

{{ err }}
No errors.

Test Data:

Card Number	Brand
4242 4242 4242 4242	Visa
5555 5555 5555 4444	Mastercard
3782 822463 10005	Am Ex
6011 1111 1111 1117	Discover
3056 9309 0259 04	Diners Club
3566 0020 2036 0505	JCB
6200 0000 0000 0005	UnionPay