js实现银行卡号分段

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/motor_tang/article/details/86612527

规则:
    1、卡号位数(6-24位);
    2、卡号第一段3位,第二段3位,其余后面的4位一段,添加空格.例如: 555 555 5555 5555 ……

html代码如下

<input type="tel" maxlength="24" class="input" />

js代码如下(引用了jq)

<script>
    	let arr = [];
	    $(".input").on("input", function(){
	    	arr = del_blank(this.value).split("");
	    	for (var i = 0; i < arr.length; i++) {
	    		if(i < 8 && i%4 == 3){
	    			add_blank(i);
	    		} else if(i > 8 && i%5 == 2){
	    			add_blank(i);
	    		}
	    	}

	    	this.value = arr.join("");
	    })


	    // 添加空格
	    function add_blank(i){
	    	if(arr[i] && arr[i] != " "){
	    		arr.splice(i, 0, " ");
	    	}
	    }

	    // 删除空格
	    function del_blank(str){
	    	return str.replace(/\s+/g, "");
	    }
	    // 可以使用此正则进行非数字和空格校验: (/[^\s0-9]/g).test(string)
    </script>

ps: 由于产品对于卡号校验规则不一样,所以在这里并没有对卡号的位数和纯数字做校验。只是个人想到的一种实现方法，不喜勿喷，谢谢!