How to display the correct credit card badge based on the credit card number from the v-model?

Question

I'm using vee-validate and v-mask on this input

               <ValidationProvider
                  name="Credit Card Number"
                  rules="required"
                  mode="eager"
                  v-slot="{ errors }"
                >
                  <input class="default-input" type="text" name="Credit Card Number" id="cardNumber" placeholder="4567 1234 5678 9012" v-model="cardNumber" v-mask="'#### #### #### ####'" @keyup="handleCreditCard()">
                  <span class="text-red-500 mt-2">{{ errors[0] }}</span>
                </ValidationProvider>

and I'm getting the credit card number (including the spaces with the v-mask) on the v-model.

onKeyup I'm trying to match with the regex to display the credit card badge:

handleCreditCard(){

      //Visa
      if (/^4[0-9]{12}(?:[0-9]{3})?$/.test(this.cardNumber)){
        this.isVisa = true
        this.isAmex = false
        this.isMasterCard = false
      }
      //Amex
      if (/^^3[47][0-9]{13}$/.test(this.cardNumber)){
        this.isVisa = false
        this.isAmex = true
        this.isMasterCard = false
      }
      //Mastercard
      if (/^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/.test(this.cardNumber)){
        this.isVisa = false
        this.isAmex = false
        this.isMasterCard = true
      } 
    }

But I can't make the badges to be displayed at the moment.

mt Data() has all set to false by default

data(){
  return {
    isVisa: false,
    isMasterCard: false,
    isAmex: false,
  }
}

Got the regex from here - https://www.regular-expressions.info/creditcard.html

Why did you add spaces after `$`? There can be no chars after the end of string. All your patterns contain this typo. — Wiktor Stribiżew, Dec 08 '21 at 18:12
Also tried `if (this.cardNumber.match(/^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/))` but no success — Fabio Zanchi, Dec 08 '21 at 18:28
You are using a mask, doesn't that add spaces in the credit card number, try removing the spaces from the input before checking the input with regular expressions. — Dean Taylor, Dec 08 '21 at 18:30
cool. removing the mask it did work but I had to do a few tweaks to dislpay with spaces. — Fabio Zanchi, Dec 08 '21 at 19:08

score 0 · Accepted Answer · answered Dec 08 '21 at 19:10

0

Removing the mask I can display the badge and using .replace() I can still show the input value on the other div with the spaces:

this.cardNumber.replace(/(.{4})/g, "$1 ")

answered Dec 08 '21 at 19:10

Fabio Zanchi

924
3
16
32

1

yes, I only can accept my own solution in 2 days – Fabio Zanchi Dec 09 '21 at 12:40

How to display the correct credit card badge based on the credit card number from the v-model?

1 Answers1