银行卡号输入框的实现(梁王的开发笔记)

需求是实现一个银行卡号的输入框，也就是每４个号用一个空格分开。

我vue里面的代码是这样的

        //add space and forbid char
        this.$watch('source.card.input', function (newValue, oldValue) {
            //avoid recursion
            if(newValue.replace(/\s/g, '') == oldValue.replace(/\s/g, '')) {
                return;
            }
            //filter char
            let temp = this.source.card.input;
            this.payinfo.cardNumber = temp.replace(/([^0-9]|\s)/g,'');
            this.source.card.input = this.payinfo.cardNumber.replace(/(\d{4})/g,'$1 ');
            console.log(this.source.card.input)
        });

相当于用watch监听输入变化，这里前面我加了个判断，因为我会自动把每４个数字替换成４个数字加一个空格。.replace(/(\d{4})/g,'$1 ');　　如果不加这个判断会导致无限递归。

后面就没啥好说的了，就是个正则