Format & Validate Credit Card Numbers In Vue.js – credit-card-validation


A credit card validation plugin to format, mask, validate credit card number, expiration, CVC, card brand in your Vue.js app.

How to use it:

1. Install and import the credit-card-validation.

import VueCardFormat from 'vue-credit-card-validation';

2. Register the plugin.

new Vue({
  el: '#app',

3. Format & validate credit card form fields using the v-cardformat directive as follows:

  <div class="number">
    <input v-cardformat:formatCardNumber>
  <div class="expiration">
    <input v-cardformat:formatCardExpiry>
  <div class="cvc">
    <label>Card CVC</label>
    <input v-cardformat:formatCardCVC>
  <div class="restrictNumeric">
    <label>Numeric input</label>
    <input v-cardformat:restrictNumeric>

Download Details:

Author: wuori

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-credit-card-validation

$ npm install vue-credit-card-validation --save

You Might Be Interested In:

Add Comment