正则表达式实现银行卡号

最新推荐文章于 2025-02-10 22:15:00 发布

hui_Steven

最新推荐文章于 2025-02-10 22:15:00 发布

阅读量6.7k

点赞数

分类专栏：大前端文章标签： HTML JavaScript 正则表达式输入格式化银行卡号

本文链接：https://blog.youkuaiyun.com/inasa123/article/details/124891768

版权

大前端专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            margin-top: 5px;
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>
</head>
<body>
    请输入银行卡号：
    <input type="text" id="cardInp" maxlength="23">

    <script>
        (function(){
            // 获取元素
            var cardInput = document.querySelector('#cardInp');

            // 当输入在输入框 输入就触发事件 input事件 这里使用input事件只要内容变化就会触发，如果使用keyup事件就不能应对粘贴过来的数据了
            cardInput.oninput = function() {
                // 当输入第5个数字的时候再加空格，前一部分正则是为了保证输入的都是数字，如果不是就会被替换成空，后边的正则使用了断言和模式单元。
                cardInput.value = cardInput.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
            }
        
        })()
    </script>   
</body>
</html>