jquery信用卡验证插件Card

 查看演示  website  立即下载

 一款模拟信用卡的插件,你可以把它用到结购物结算中,当您输入卡号时会自动显示当前类型的卡,不但用户体验更好还不容易出错.一切都是用纯CSS创建、HTML和Javascript和不需要的图像.

使用方法

您将需要包括正确的CSS和Javascript文件为HTML。你可以找到在/lib/js/card.必要的文件js和/lib/css/card.css和它们添加到您的HTML。

<!-- in HEAD -->
<link rel="stylesheet" href="/path/to/card.css">
<!-- at the end of BODY -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/card.js"></script>

一旦你已经包括了这些文件，你可以初始化卡。

$('form').card({  
    container: '.card-wrapper',
    numberInput: 'input#number', 
    expiryInput: 'input#expiry', 
    cvcInput: 'input#cvc', 
    nameInput: 'input#name', 
    width: 200, 
    formatting: true 
    // Strings for translation - optional
    messages: {
        validDate: 'valid
date', 
        monthYear: 'mm/yyyy', 
        fullName: 'Say my name' 
    }
});

使用多个输入一个字段

卡可以使用在有多个输入的形式,呈现单个字段。使用信用卡这个功能,只是通过jQuery选择器中选择字段以正确的顺序。例如,

<form>
    <input type="text" name="number">
    <input type="text" name="first-name"/>
    <input type="text" name="last-name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>

<script>
$('form').card({
    container: '.card-wrapper',
    nameInput: 'input[name="first-name"], input[name="last-name"]'
});
</script>

翻译

在不同语言的字符串，您可以通过在一个消息对象或集合之前初始化卡。

信息对象的方法

<script src="/path/to/card.js"></script>
<form>
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>
$('form').card({
    container: '.card-wrapper',
    messages: {
        validDate: 'expire
date',
        monthYear: 'mm/yy',
        fullName: 'Your name'
    }
});
</script>

$.card.messages 消息的方法

<script src="/path/to/card.js"></script>
<form>
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>
$.card.messages = {
    validDate: 'expire
date',
    monthYear: 'mm/yy',
    fullName: 'Your name'
}
$('form').card();
</script>

PREVIOUS:
NEXT:
jquer滚动隐藏显示顶部导航栏
jquery表格插件Bootstrap Table