Question

虽然之前也曾问过这个问题，但它对我不起作用。所以我问这个问题。我想在信用卡号码的到期日应用验证。这意味着如果到期日期早于当前日期，那么它应该在到期日期下拉列表下方打印一条错误消息。以下是我的HTML代码：

$('#billmanagementform').validate({
        rules: {
              cardExpYear: {
                    CCExp: {
                          month: '#cc-exp-month',
                          year: '#cc-exp-year'
                    }
              }
        }
});

$.validator.addMethod('CCExp', function(value, element, params) {
        var minMonth = new Date().getMonth() + 1;
        var minYear = new Date().getFullYear();
        var month = parseInt($(params.month).val(), 10);
        var year = parseInt($(params.year).val(), 10);
        return (year > minYear || (year === minYear && month >= minMonth));
  }, 'Your Credit Card Expiration date is invalid.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<form id="billmanagementform">
<div class="col-sm-2 col-md-2 col-xs-4">
                        <select name="cc-exp-month" id="cc-exp-month" class="wide100 required">
                            <option value="" selected="selected">Month</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </div>
                    <div class="col-sm-4 col-md-4 col-xs-8">
                        <select name="cc-exp-year" id="cc-exp-year" class="wide100 required">
                            <option value="" selected="selected">Year</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>
                    </div>
</form>

但是这段代码对我来说根本不起作用。你能告诉我哪里出错吗？

Answer 1

验证规则使用验证方法绑定元素（例如required等）

rules对象应包含键值对，其中，key为name 元素的属性，值是包含一个或多个的object 验证方法

因此，cardExpYear必须指向某些元素的name属性。更改name的{{1}}应该可以解决问题。

以下是经过修改的代码段：

此外，修改了select方法中的条件，只有在选择月份和年份时才会出错。

＆＃13;

CCExp

＆＃13;

$('#billmanagementform').validate({
  rules: {
    cardExpYear: {
      CCExp: {
        month: '#cc-exp-month',
        year: '#cc-exp-year'
      }
    }
  }
});

$.validator.addMethod('CCExp', function(value, element, params) {
  var minMonth = new Date().getMonth() + 1;
  var minYear = new Date().getFullYear();
  var month = parseInt($(params.month).val(), 10);
  var year = parseInt($(params.year).val(), 10);

  return (!month || !year || year > minYear || (year === minYear && month >= minMonth));
}, 'Your Credit Card Expiration date is invalid.');

＆＃13;

Jquery中的信用卡到期日验证

1 个答案: