解决微信小程序银行卡号输入转换格式

解决微信小程序银行卡号输入转换格式问题

ps：2017-02-17 19：44 (发现新bug，暂已解决优化中) 
（感觉会有更好的办法，希望有大牛能对我指点指点）

输入框： 

 

输入后的值： 

 

样式太丑了，决定换一个样式 
给输入框一个监听事件 

 

 

（输入的值长度+1） % 5 等于 0 就加上空格，但是后来发现，用户回删数据的时候依旧在监听，导致空格删除不了，当输入的长度为4 则加上空格，用户回删空格触发监听事件，长度继续为4 继续加上空格….. 
思考一番后决定给予一个数据中转站，将每次输入的值长度给予中转站，每次首先根据中转站的数据判断用户是在输入还是回删，输入则加上空格，回删则除去尾部空格。

效果如下 

 

比起之前的样式好看多了

js代码

1. var app = getApp()
2. Page({
3. data: {
4. userInputCardNo2:'',
5. //长度中转站
6. cardlen : 0
7. },
8. //输入框的监听事件
9. BankCardNoInput: function(e){
10. var card = e.detail.value;
11. var len = card.length
12. //判断用户是输入还是回删
13. if(len > this.data.cardlen){
14. //用户输入
15. if((len+1) % 5 == 0){
16. card = card+' '
17. }
18. }else{
19. //用户回删
20. card = card.replace(/(^\s*)|(\s*$)/g, "")
21. }
22. //将处理后的值赋予到输入框
23. this.setData({
24. userInputCardNo : card
25. })
26. //将每次用户输入的卡号长度赋予到长度中转站
27. this.setData({
28. cardlen:len
29. })
30. },
31. bindViewTap: function() {
32. wx.navigateTo({
33. url: '../logs/logs'
34. })
35. },
36. onLoad: function () {
37. }
38. })

2017-02-20  新BUG为 用户输入12345会转成1234 5但是用户回删2次，变成1234再次输入的时候，长度为5，判断为用户回删，不作处理，目前我所解决的方法是在js接受用户输入的卡号时将所有空格去除并获取长度，长度为5、9、13、17这几个地方时进行切割字符串，感觉这样处理不是很好，期望有大牛能指导一下

代码使用位置：

1. if(len > this.data.cardlen){
2. if(len % 4 == 0){
3. card = card+' '
4. }
5.  
6. if(len/5 == 1||len/9 == 1||len%13 == 0||len%17 == 0){
7. var checkNo = checkCardNo(len,card)//处理的方法
8. if(card != checkNo){
9. card = checkNo
10. }
11. }
12. }

js新增代码如下：

1. function checkCardNo(len,card){
2. var newStr = ""
3. var card = card.replace(/\s/g,"")
4. if(len >= 5){
5. newStr = newStr+card.substr(0,4)+" "
6. }
7. if(len >= 9){
8. newStr = newStr+card.substr(4,4)+" "
9. }
10. if(len >= 13){
11. newStr = newStr+card.substr(8,4)+" "
12. }
13. if(len >= 17){
14. newStr = newStr+card.substr(12,4)+" "
15. }
16. newStr = newStr + card.substr(len-1,len)
17.  
18. return newStr
19. }