解決微信小程序銀行卡號輸入轉換格式問題

輸入框：

輸入后的值：

樣式太丑了，決定換一個樣式

給輸入框一個監聽事件

(輸入的值長度+1) % 5 等于 0 就加上空格，但是后來發現，用戶回刪數據的時候依舊在監聽，導致空格刪除不了，當輸入的長度為4 則加上空格，用戶回刪空格觸發監聽事件，長度繼續為4 繼續加上空格…..

思考一番后決定給予一個數據中轉站，將每次輸入的值長度給予中轉站，每次首先根據中轉站的數據判斷用戶是在輸入還是回刪，輸入則加上空格，回刪則除去尾部空格。

效果如下

比起之前的樣式好看多了

js代碼

1. var app = getApp() 
2.  
3. Page({ 
4.  
5.   data: { 
6.  
7.     userInputCardNo2:'', 
8.  
9.     //長度中轉站 
10.  
11.     cardlen : 0 
12.  
13.   }, 
14.  
15.   //輸入框的監聽事件 
16.  
17.   BankCardNoInput: function(e){ 
18.  
19.     var card = e.detail.value; 
20.  
21.     var len = card.length 
22.  
23.     //判斷用戶是輸入還是回刪 
24.  
25.     if(len > this.data.cardlen){ 
26.  
27.       //用戶輸入 
28.  
29.       if((len+1) % 5 == 0){ 
30.  
31.         card = card+' ' 
32.  
33.       } 
34.  
35.     }else{ 
36.  
37.       //用戶回刪 
38.  
39.       card = card.replace(/(^/s*)|(/s*$)/g, "") 
40.  
41.     } 
42.  
43.     //將處理后的值賦予到輸入框 
44.  
45.     this.setData({ 
46.  
47.       userInputCardNo : card 
48.  
49.     }) 
50.  
51.     //將每次用戶輸入的卡號長度賦予到長度中轉站 
52.  
53.     this.setData({ 
54.  
55.       cardlen:len 
56.  
57.     }) 
58.  
59.   }, 
60.  
61.   bindViewTap: function() { 
62.  
63.     wx.navigateTo({ 
64.  
65.       url: '../logs/logs' 
66.  
67.     }) 
68.  
69.   }, 
70.  
71.   onLoad: function () { 
72.  
73.   } 
74.  
75. }) 

2017-02-20 

新BUG為 用戶輸入12345會轉成1234 5但是用戶回刪2次，變成1234再次輸入的時候，長度為5，判斷為用戶回刪，不作處理，目前我所解決的方法是在js接受用戶輸入的卡號時將所有空格去除并獲取長度，長度為5、9、13、17這幾個地方時進行切割字符串，感覺這樣處理不是很好，期望有大牛能指導一下

代碼使用位置：

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

js新增代碼如下：

1. function checkCardNo(len,card){ 
2.  
3.   var newStr = "" 
4.  
5.   var card = card.replace(//s/g,"") 
6.  
7.   if(len >= 5){ 
8.  
9.     newStr = newStr+card.substr(0,4)+" " 
10.  
11.   } 
12.  
13.   if(len >= 9){ 
14.  
15.     newStr = newStr+card.substr(4,4)+" " 
16.  
17.   } 
18.  
19.   if(len >= 13){ 
20.  
21.     newStr = newStr+card.substr(8,4)+" " 
22.  
23.   } 
24.  
25.   if(len >= 17){ 
26.  
27.     newStr = newStr+card.substr(12,4)+" " 
28.  
29.   } 
30.  
31.   newStr = newStr + card.substr(len-1,len) 
32.  
33.   return newStr 
34.  
35. }