如何根据v型信用卡号码显示正确的信用卡徽章？

Question

我在这个输入上使用了vee验证和v掩码。

               <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模型上的信用卡号码(包括带v掩码的空格)。

onKeyup我正试图与regex匹配以显示信用卡徽章：

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 ()默认设置为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, "$1 ")