Question

我正在使用jQuery验证，我一直在尝试解决CC月份和CC年度两个单独的下拉菜单。 cardNumber验证正常，但月份和年份将失去焦点时“无效”，但一旦纠正就不会验证。

以下是表格：

<form name="form2" id="ccTest" method="post" action="">
            <label for="cardNumber">Card Number</label>
            <input type="text" class="required" size="25" name="cardNumber" id="cardNumber" autocomplete="off" />


            <label for="cardExpMonth">Expiration Date</label>

            <select name="cardExpMonth" id="cardExpMonth" size="1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select> 

            <select name="cardExpYear" id="cardExpYear" size="1">
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
            </select>

            <input type="submit" name="submit" value="submit" />
        </form>

这是剧本：

$(document).ready(function(){

        $('#ccTest').on("change", function(){
            $('#ccTest').validate({
            rules: {
                cardNumber: {
                    required: true,
                    creditcard: true,
                    minlength: 13,
                    maxlength: 16      
                },
                cardExpYear: {
                    CCExp: { 
                        formMonth: #cardExpMonth,
                        formYear: #cardExpYear
                    }
                }

            }
            });
        });

        $.validator.addMethod("CCExp", function(value, element, params) {
                var minMonth = new Date().getMonth() + 1;
                var minYear = new Date().getFullYear();

                var formMonth = $(params.cardExpMonth);
                var formYear = $(params.cardExpYear);

                var month = parseInt(formMonth.val(), 10);
                var year = parseInt(formYear.val(), 10);


                if ((formYear > minYear) || ((formYear === minYear) && (formMonth >= minMonth))) {
                    return true;
                } else {
                    return false;
                }
        }, "Your Credit Card Expiration date is invalid.");

    });

Answer 1

我解决了这个问题。如果有更好的方法，我会很高兴看到它。

<script>
        $(document).ready(function(){

            $('#ccTest').on("change", function(){
                $('#ccTest').validate({
                rules: {
                    cardNumber: {
                        required: true,
                        creditcard: true,
                        minlength: 13,
                        maxlength: 16      
                    },
                    cardExpYear: {
                        required: true,
                        CCExp: { 
                            formMonth: "#cardExpMonth",
                            formYear: "#cardExpYear"
                        }
                    }

                }
                });


                $.validator.addMethod("CCExp", function(value, element, params) {
                        var minMonth = new Date().getMonth() + 1;
                        var minYear = new Date().getFullYear();

                        var formMonth = $("#cardExpMonth").val();
                        var formYear = $("#cardExpYear").val();



                        var month = parseInt(formMonth);
                        var year = parseInt(formYear);

                        if ((year > minYear) || ((year === minYear) && (month >= minMonth))) {
                            return true;
                        } else {
                            return false;
                        }
                }, "Invalid Expiration Date!");
            });
        });
    </script>

在CC月份和年份的jQuery验证中单独选择

1 个答案: