基于jquery的bankInput银行卡账号格式化

简介

本攻略介绍了基于jquery的bankInput银行卡账号格式化，帮助网站开发者快速实现银行卡号的格式化功能。

环境准备

在使用bankInput之前，需要引入jquery库和bankInput库。

引入jquery库

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

引入bankInput库

<script src="//cdn.bootcss.com/jquery.bankinput/1.0.0/jquery.bankInput.min.js"></script>

使用方法

在页面中加入一个银行卡号输入框

<input type="text" id="bankNo" name="bankNo" placeholder="请输入银行卡号">

调用bankInput方法

$(document).ready(function() {
    $('#bankNo').bankInput(function(e, bankInfo){
        console.log(bankInfo);
    });
});

其中，bankInput方法接受一个回调函数作为参数，该回调函数会在输入银行卡号并且信息校验通过后被调用。回调函数的第二个参数bankInfo是一个包含银行卡号相关信息的对象，可以通过该对象获取银行卡类型、银行名称、银行卡号前缀和银行卡号长度等信息。

样式优化

为了让银行卡号输入框更具美观性，可以在CSS文件中添加如下代码：

.bankCardNo{
    width: 200px;
    height: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 16px;
}

在输入银行卡号时，会自动格式化银行卡号的显示格式，例如：

输入：6217003810005352896，显示：6217 0038 1000 5352 896
输入：4367429123855616，显示：4367 4291 2385 5616

示例

示例一：银行卡号格式化

在本示例中，输入的银行卡号会被自动格式化成带有空格的格式。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>jQuery bankInput 银行卡账号格式化</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>jQuery bankInput 银行卡账号格式化</h1>
        <form>
            <div class="form-group">
                <label for="bankNo">银行卡号：</label>
                <input type="text" id="bankNo" name="bankNo" class="bankCardNo" placeholder="请输入银行卡号">
            </div>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.bankinput/1.0.0/jquery.bankInput.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#bankNo').bankInput(function(e, bankInfo){
                console.log(bankInfo);
            });
        });
    </script>
</body>
</html>

示例二：获取银行卡信息

在本示例中，输出输入的银行卡相关信息。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>jQuery bankInput 银行卡账号格式化</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>jQuery bankInput 银行卡账号格式化</h1>
        <form>
            <div class="form-group">
                <label for="bankNo">银行卡号：</label>
                <input type="text" id="bankNo" name="bankNo" class="bankCardNo" placeholder="请输入银行卡号">
            </div>
        </form>
        <div id="result">
            <ul>
                <li>银行卡类型： <span id="cardType"></span></li>
                <li>银行名称： <span id="bankName"></span></li>
                <li>银行卡号前缀： <span id="bin"></span></li>
                <li>银行卡号长度： <span id="length"></span></li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.bankinput/1.0.0/jquery.bankInput.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#bankNo').bankInput(function(e, bankInfo){
                $('#cardType').text(bankInfo.cardType);
                $('#bankName').text(bankInfo.bankName);
                $('#bin').text(bankInfo.bin);
                $('#length').text(bankInfo.length);
            });
        });
    </script>
</body>
</html>

在输入银行卡号并且信息校验通过后，会输出相关信息，例如：

输入银行卡号：6217003810005352896

输出结果：
- 银行卡类型：银联借记卡
- 银行名称：中国建设银行
- 银行卡号前缀： 621700
- 银行卡号长度： 19

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的bankInput银行卡账号格式化 - Python技术站

基于jquery的bankInput银行卡账号格式化

基于jquery的bankInput银行卡账号格式化

简介

环境准备

使用方法

示例

示例一：银行卡号格式化

示例二：获取银行卡信息

相关文章