如何根据 v-model 中的信用卡号显示正确的信用卡徽章？

Question

我在这个输入上使用 vee-validate 和 v-mask

               <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>

我正在获取 v-model 上的信用卡号（包括带有 v-mask 的空格）。

onKeyup 我正在尝试与正则表达式匹配以显示信用卡徽章：

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
      } 
    }

但是我暂时无法让徽章显示出来。

mt Data() 默认都设置为 false

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

从这里得到正则表达式 - https://www.regular-expressions.info/creditcard.html

Answer 1

移除掩码我可以显示徽章并使用 .replace() 我仍然可以在另一个 div 上显示输入值和空格：

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

如何根据 v-model 中的信用卡号显示正确的信用卡徽章？

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

regex

vue.js

nuxt.js

vee-validate