如何使用jquery.validation creditcard2驗證信用卡？

Question

我希望有人可以指出正確的方向。 我希望在我的表單中將此插件與jquery.validation 插件一起使用，但是從我看到的結果來看，為了使creditcard2能夠正常運行，我需要使用select標記。

我目前所擁有的是：

 <p class="ccType">
     <label for="card_type" class="error">You must select a credit card from one of the following.</label>
        <br>
     <input type="radio" value="1000" id="card_type_1000" name="card_type" style="outline:none; border:none;" /> 
        <img src="../visa.png" alt="Visa" width="50" height="30" align="top" /> 
        <input type="radio" value="1002" id="card_type_1002" name="card_type" style="outline:none; border:none;" /> 
        <img src="../mastercard.png" alt="Mastercard" width="50" height="30" align="top" /> 
        <input type="radio" value="1006" id="card_type_1006" name="card_type" style="outline:none; border:none;" /> 
        <img src="../discover.png" alt="Discover" width="50" height="30" align="top" /> 
        <input type="radio" value="1004" id="card_type_1004" name="card_type" style="outline:none; border:none;" /> 
        <img src="../amex.png" alt="American Express" width="50" height="30" align="top" />
    </p>

值= 1000是“簽證”

值= 1002是“ MasterCard”

值= 1006是“發現”

值= 1004是“ AmEx”

插件站點提到創建查找哈希。 我不知道如何創建一個。 此外，該站點上的文檔僅顯示使用<select></select>示例。 我正在使用輸入。

如何使它與當前的設置配合使用。

有什么建議么？

Answer 1

查找哈希看起來像

var hash = {
    1000: "Visa",
    1002: "MasterCard",
    1004: "AmEx",
    1006: "Discover"
};

然后，您可以使用以下驗證功能，這些功能當然已內置到當前設置中：

$("#myform").validate({
    rules: {
        cardnum: { // this should be the id of the card number field
            creditcard2: function(){ return hash[$('.ccType > input:checked').val()]; }
        }
    }       
});

這段簡潔的代碼首先在.ccType元素中查找所有inputs 。 然后，它選擇一個被檢查的（如果有的話）並獲取其值。 然后，將值推入哈希值以將其更改為插件喜歡的值。 還有...希望這能奏效。