Vuejs格式的信用卡號不起作用

Question

我有一個支付網關組件，當您選擇信用卡時，我使用_formatCreditCard方法以這種格式留下信用卡號：4444 2442 4342 3434

這是我的 function：

_formatCreditCard: function() {

        var numberChunks = this.credit_card_number.match(/.{1,4}/g);

        if (numberChunks) {
          this.credit_card_number = numberChunks.join(' ');

        }
        else
          return '';

      }

這是我的組成部分：

Vue.component('payment-methods', {

   template : '<div>\
                <template>\
                    <div class="radio col-xs-12">\
                      <label><input type="radio" v-model="pick" name="payment_method" value="CARD"> <i class="fa fa-credit-card-alt"></i> Tarjeta</label>\
                    </div>\
                    <div id="creditCard" class="col-xs-12" v-if="pick == credit_card">\
                      <div class="form-group col-sm-12">\
                        <label for="cardholderName">Titular de la tarjeta</label>\
                        <input type="text" class="form-control" id="cardholderName" name="credit_card[holder_name]">\
                      </div>\
                      <div class="form-group col-sm-9">\
                        <label for="cardNumber">Número de tarjeta</label>\
                        <input v-model="credit_card_number" type="text" class="form-control" id="cardNumber" name="credit_card[number]" @keyup="_formatCreditCard">\
                      </div>\
                      <div class="form-group col-sm-3">\
                        <label for="credit_card_number">CVN <i class="fa fa-info-circle"></i></label>\
                        <input id="cvn" type="text" class="form-control" name="credit_card[cvn]">\
                      </div>\
                      <div class="form-group col-sm-12">\
                        <label for="holder_name">Fecha de vencimiento <span class="subtitle">(ej: 06/26)</span></label><br>\
                        <div class="date-element">\
                          <select id="expiryDateMM" \
                                  name="credit_card[expiry_date_mm]"\
                                  class="form-control">\
                            <option v-for="month in months">{{month}}</option>\
                          </select>\
                        </div>\
                        <div class="divider">/</div>\
                        <div class="date-element">\
                          <select id="expiryDateYY"\
                                name="credit_card[expiry_date_yy]"\
                                class="form-control">\
                          <option v-for="year in years">{{year}}</option>\
                        </select>\
                        </div>\
                      </div>\
                    </div>\
                    <div class="radio col-xs-12">\
                      <label><input type="radio" v-model="pick" name="payment_method" value="PAYPAL"> <i class="fa fa-cc-paypal"></i> Paypal</label>\
                    </div>\
                    <div id="paypal" class="col-xs-12" v-if="pick == paypal">\
                      <p class="payment-info">\
                      Tanto si eres cliente de Paypal como si no, puedes realizar pagos a través de esta plataforma. Es el método más popular de pagos online en todo el mundo.\
                      </p>\
                    </div>\
                    <div class="radio col-xs-12">\
                      <label><input type="radio" v-model="pick" name="payment_method" value="BANK_TRANSFER"> <i class="fa fa-bank"></i> Transferencia</label>\
                    </div>\
                    <div id="bankTransfer" class="col-xs-12" v-if="pick == bank_transfer">\
                      <p class="payment-info">\
                      El pedido será enviado una vez recibamos el ingreso o  transferencia. Recuerda que las transferencias pueden tardar 2-3 días hábiles en recibirse y los ingresos al menos 24 h.\
                      </p>\
                    </div>\
                </template>\
               </div>',    


    data: function()
    {
       return {
            pick:   'CARD',
            credit_card: 'CARD',
            paypal: 'PAYPAL',
            bank_transfer: 'BANK_TRANSFER',
            credit_card_number: '',
       }
    },

    props : ['products','web_general_discount','current_article_size','current_article_model','simple_view_properties'],

    updated: function() {

       if(this.show)
        $('body').addClass('no-scroll')
       else
        $('body').removeClass('no-scroll')

    },

    computed: {

     months: function () {
        return [
          '01', '02', '03', '04',
          '05', '06', '07', '08',
          '09', '10', '11', '12'
        ];
      },

      years: function () {
        var years= [];
        var currentYear = (new Date()).getFullYear() % 2000;

        for (var i = 0; i < 18; i++)
          years.push(currentYear + i);

        return years;
      },




    },


    mounted: function() {


    },

    methods: {    

      _formatCreditCard: function() {

        var numberChunks = this.credit_card_number.match(/.{1,4}/g);

        if (numberChunks) {
          this.credit_card_number = numberChunks.join(' ');

        }
        else
          return '';

      }


    }

});

它目前不起作用，結果我得到了這個：

我想要這個結果：

Answer 1

看起來您忘記考慮字符串的空格了嗎？ 如果我理解正確的話。 如果刪除字符串之前的空格，這是否可以解決問題？ 我在jsfiddle用jquery和html制作了一個示例。 https://jsfiddle.net/uwry7xn7/

$( "#input" ).keyup(function(e) {
  //.replace(/\s/g, ''); is for removing spaces
  var str = $(e.currentTarget).val().replace(/\s/g, '');
  var numberChunks = str.match(/.{1,4}/g);
  console.log(numberChunks)
  var result = numberChunks.join(' ');
  console.log(result)
  $(e.currentTarget).val(result)
});

jQuery完成了這項工作。

Answer 2

試試這個簡單的 function

在你的腳本中：

formatCardNumber(event) {
        let value = event.target.value;
        if(!value) return

        this.cardNumber = value.replaceAll(" ", "")
        .split("")
        .map((v, index) => {
            if(index > 0 && index % 4 == 0 ) {
                return " " + v
            }else {
                return v
            }
        }).join("")
    }

在您的 html 模板中

<input v-model="cardNumber" @keyup="formatCardNumber($event)" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">

PS：cardNumber 在您的數據 function 中，它返回組件實例的初始反應 state ( https://vuejs.org/api/options-state.html#data )

提示：對於到期日期 (xx/xx) 的格式，您可以使用相同的 function，但在“地圖”中將返回“”更改為“/”，將 4 取模為 2

祝你有美好的一天