插件名称 | vue-credit-card-validation |
---|---|
发布时间 | 2020年4月16日 |
插件作者 | wuori |
信用卡验证插件,用于格式化,屏蔽,验证Vue.js应用中的信用卡号,有效期,CVC,信用卡品牌。
# 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>
v0.1.10(10/25/2020)