注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery信用卡银行卡验证插件Card

UI fishcity 3418浏览

jquery信用卡银行卡验证插件Card

Card一款模拟信用卡和银行卡卡号输入的jquery插件,你可以把它用到结购物结算中,当您输入卡号时会自动显示当前类型的卡,不但用户体验更好还不容易出错。card插件是用纯CSS、HTML和Javascript创建,文件更小,打开速度更快,和图片说再见。什么,你需要的是显示字符串输入数量jquery插件?不好意思,我这说的是card用法。

使用方法

引入核心文件

<!-- 在 HEAD区引入 -->
<link rel="stylesheet" href="/path/to/card.css">
<!-- 在body的之后引入 -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/card.js"></script>

当把以上文件引入后,便可以初始化信用卡了。

$('form').card({
    container: '.card-wrapper', // *必须*
    numberInput: 'input#number', // optional — default input[name="number"]
    expiryInput: 'input#expiry', // optional — default input[name="expiry"]
    cvcInput: 'input#cvc', // optional — default input[name="cvc"]
    nameInput: 'input#name', // optional - defaults input[name="name"]

    width: 200, // optional — default 350px
    formatting: true // optional - default true

    // Strings for translation - optional
    messages: {
        validDate: 'valid\ndate', // optional - default 'valid\nthru'
        monthYear: 'mm/yyyy', // optional - default 'month/year'
        fullName: 'Say my name' // optional - default 'Full 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>

为了使卡适用于不同的言语环境,你可以通过设置message对象或是在card初始前设置$.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>
    $('form').card({
    container: '.card-wrapper',
    messages: {
        validDate: 'expire\ndate',
        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\ndate',
    monthYear: 'mm/yy',
    fullName: 'Your name'
}
$('form').card();
</script>

转载请注明:jQ酷 » jquery信用卡银行卡验证插件Card

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。