格式化和验证Vue.js中的信用卡号- vue-credit-card-validation

格式化和验证Vue.js中的信用卡号- vue-credit-card-validation
插件名称 vue-credit-card-validation
发布时间 2020年4月16日
插件作者 wuori

信用卡验证插件,用于格式化,屏蔽,验证Vue.js应用中的信用卡号,有效期,CVC,信用卡品牌。

变更日志:

v0.1.10(10/25/2020)

  • 依赖项更新。

安装和下载:

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

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

使用:

1.安装并导入信用卡验证。

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

2.注册插件。

Vue.use(VueCardFormat);
new Vue({
  el: '#app',
});

3.使用v-cardformat指令格式化和验证信用卡表格字段,如下所示:

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