带有 vuejs 的信用卡的 4 位空格

问题描述

我尝试在输入信用卡号时在 4 位数字后留一个空格。例如：0000 0000 0000 0000 我正在使用 vue js。我看过示例，但使用 jquery，我不想使用 jquery。

感谢您的帮助

<!--template -->
<div>
  <div>
    <p>Numéro de carte</p>
    <input class="numeroCarte" type="tel" name="numeroCarte" placeholder="Saisissez votre numéro de carte " maxlength="19" pattern="\d*"><i class="fas fa-credit-card"></i>
  </div>
  <div>
    <p>Date d'expiration</p>
    <input type="tel" name="expiration" pattern="\d*" maxlength="7" placeholder="MM / AA">
  </div>
  <div>
    <p>CVV</p>
    <input type="tel" name="cvv" pattern="\d*" maxlength="4" placeholder="CVV">
  </div>
</div>
<!-- /template -->

解决方法

我认为在 Vuejs 中输入模式的最简单方法是使用 vue-the-mask

例如，您可以将此模式用于银行帐户：

...

<div>
 <label>Bank Account</label>
 <the-mask
  v-model="bankAccount"
  :mask="['###-#','####-#','#####-#','######-#']"
 />
</div>

...

,

在 Vue2 中，filters 就是为这种目的而设计的。

const app = new Vue({
  el: '#app',data(){
    return {
      cardNumber: '' 
    } 
  },filters: {
    formatCardNumber(value){
      return value ? value.match(/.{1,4}/g).join(' ') : '';
    } 
  },methods: {
    updateValue(e){
       this.cardNumber = e.target.value.replace(/ /g,'');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <input :value="cardNumber | formatCardNumber" @input="updateValue"/>
</main>

在 Vue3 中，您可以使用 computed 来替换它。 Filters are removed from Vue 3.0 and no longer supported.

Vue.createApp({
      data(){
        return {
          cardNumber: '' 
        } 
      },computed: {
        formatCardNumber(){
          return this.cardNumber ? this.cardNumber.match(/.{1,4}/g).join(' ') : '';
        } 
      },methods: {
        updateValue(e){
           this.cardNumber = e.target.value.replace(/ /g,'');
        }
      }
    }).mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<main id="app">
  <input :value="formatCardNumber" @input="updateValue"/>
</main>

,

我猜你的卡输入连接到数据对象：

data() {
  return {
    card: ''
  }
}

在带有 v-model 的模板中，您可以为 keyup 添加事件侦听器：

<input v-model="card" @keyup="formatCard" class="numeroCarte" type="tel" name="numeroCarte" placeholder="Saisissez votre numéro de carte " maxlength="19" pattern="\d*"><i class="fas fa-credit-card"></i>

和制作方法：

methods: {
  formatCard() {
    let nn = this.card;
    (nn.length - (nn.split(" ").length - 1)) % 4 === 0 ? this.card += ' ' : ''
  }
}

在每个 keyup 事件的方法中，您检查卡片输入中输入的文本长度（没有空格）是否可以被 4 整除。