哇寶部落格
Wabow Information Inc. Blog
前幾個星期做了有關 分期付款 的機制，需要 檢查信用卡卡號 的功能。我們都知道信用卡有分很多種，在台灣最常見的大概就是：Visa、MasterCard 以及 JCB 了，而每一種的卡號規則、長短又各有不同，自己寫感覺會非常麻煩。網路上已經有很多前人的成果可以拿來套用，不過都還要稍微修改才能完全符合自己想要的樣子。
而因為信用卡的欄位就那幾個，格式也都一模一樣，所以懶惰的我就想寫一個 jQuery Plugin，方便以後使用囉。就先叫 WaCard.js 好了 
.....（初版，因為並沒有做後三碼驗證，也沒有卡片持有人欄位）
提醒：目前僅在 firefox 上測試過！
功能：
- 自訂欄位名稱
- 檢查未填欄位
- 輸入卡號滿四碼跳下一欄位
- 檢查卡號
- 檢查卡片截止日期
- [懶人專用] 信用卡類別選單自動生成 - 可自訂信用卡類別 （內建 Visa，Master，JCB，AmEx etc.. 共13種，預設只顯示台灣常用的三種）
- [懶人專用] 信用卡截止日期選單自動生成 - 列出未來十年的年份選單
- 自訂錯誤函式 - 預設是跳出 alert()，可以自由運用如何處理錯誤訊息（eg BlockUI etc..）。
- 自訂檢查通過後函式 - 預設是跳出確認對話框後送出，可客製化處理（eg ajaxSubmit etc..）。
安裝步驟：
1. 所需檔案：
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> // 在這個版本開發的
<script type="text/javascript" src="jquery.selectboxes.js"></script> // 懶人作法要用到，非必要
<script type="text/javascript" src="wacard.js"></script>
2. 指定要執行 WaCard 的表單
$(function () {
// 如果一切都照預設，那直接呼叫 wacard 就可以啦～
$('#myform').wacard();
});
3. 表單HTML
<form id="myform" method="post">
<fieldset>
<div>
<label>卡號:</label>
<select name="cc_type"></select>
<input type="text" name="cc_no1" size="4" maxlength="4" />
<input type="text" name="cc_no2" size="4" maxlength="4" />
<input type="text" name="cc_no3" size="4" maxlength="4" />
<input type="text" name="cc_no4" size="4" maxlength="4" />
</div>
<div>
<label>到期日:</label>
<select name="cc_m"></select> 月
<select name="cc_y"></select> 年
</div>
</fieldset>
<div>
<input type="submit" name="submit" value="submit" />
</div>
</form>註：上面所說的懶人作法是指藍色的部份，WaCard 會判斷若該選單是空的，才加入預設的值。不過用了以後，在 JavaScript Disabled 的情況下這個 form 就不是 XHTML Valid 的囉，而且關了 JavaScript 這個 form 就不能正常跑了。
接下來，我們可以自訂錯誤訊息 跟 檢查通過後的處理，下面的程式碼結合了另外兩個 jQuery Plugins - BlockUI & AjaxSubmit ：
$(function () {
var customSuccess = function() {
var options = {
dataType: 'json',
success: function(json) {
if(json.message!=''){
alert(json.message);
}else{
location.reload();
}
}
};
$(this).ajaxSubmit(options);
};
var customError = function(errorMessages) {
var errorList = '';
if (0 < errorMessages.length) {
for (i=0; i<errorMessages.length; i++) {
errorList += '
<li>'+errorMessages[i]+'</li>
';
}
} else {
errorList = errorMessages;
}
$.blockUI({
message: '很抱歉，您輸入的信用卡資料有誤！
<ul>'
+ errorList
+ '</ul>
<button>確認</button>',
css: {
border: 'none', padding: '15px 25px', backgroundColor: '#333', '-webkit-border-radius': '10px',
'-moz-border-radius': '10px', opacity: '.75', color: '#fff', width: '240px', top: '33%', left: '45%'
}
});
return false;
};
$('#myForm').wacard({
onError: customError,
onSuccess: customSuccess,
});
});
大概就是這樣，有需要的人可以下載玩玩看囉。 
信用卡號測式樣本
| Credit Card | Sample Number |
| Visa | 4111 1111 1111 1111 |
| MasterCard | 5500 0000 0000 0004 |
| American Express | 3400 0000 0000 009 |
| Diner's Club | 3000 0000 0000 04 |
| Carte Blanche | 3000 0000 0000 04 |
| Discover | 6011 0000 0000 0004 |
| en Route | 2014 0000 0000 009 |
| JCB | 3088 0000 0000 0009 |
注意事項：
- 透過網路輸入信用卡資料一定要加密（SSL）。
- 信用卡若有需要存入資料庫，也一定要先加密後才可存入。
- 可靠的線上刷卡方式仍是建議透過 銀行 或 第三方刷卡網站代為處理。
參考資料:
Sample Valid Credit Card Numbers
jQuery Validate Credit Card Extension
BNQ 的 creditcard.js
- Tags: jQuery