格式化银行卡号

在使用财付通还信用卡时，在输入卡号后，卡号会自动按照4位一组分开来。我觉得这个功能挺好的，能够方便用户检查刚输入的卡号，有助于提升用户体验。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>格式化数字</title>
 6 <style type="text/css">
 7 #cardNumber { height:50px; width:500px; line-height:50px; font-size:48px; }
 8 </style>
 9 </head>
10 
11 <body>
12 <input type="text" id="cardNumber" value="" />
13 <script type="text/javascript">
14 var cardNum = document.getElementById("cardNumber");
15 var cardNum_val;
16 cardNum.onblur = checkForm;
17 function checkForm() {
18     cardNum_val = cardNum.value;
19     if(cardNum_val === "") {
20         return false
21     }
22     else if(cardNum_val.length === 16) {
23         for(var i=0; i<cardNum_val.length; i++) {
24             cardNum_val[i] = Number(cardNum_val[i]);
25             if(isNaN(cardNum_val[i])) {
26                 alert("请输入数字");
27                 break;
28             }
29             else {
30                 formatNumber(cardNum_val);
31             }
32         }
33     }
34     else {
35         return false;
36     }
37     
38     function formatNumber(thisNumber) {
39         var newStr = "";
40         for(var i=0; i<thisNumber.length; i++) {
41             if(i!==0 && i%4===0) {
42                 newStr += " ";
43             }
44             newStr += thisNumber[i];
45         }
46         cardNum.value = newStr;
47     }
48 }
49 </script>
50 </body>
51 </html>
posted @ 2012-05-04 11:20  长风freedom  阅读(410)  评论(0)  编辑  收藏  举报