Jquery中的信用卡到期日期验证

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 对象应包含键值对，其中键是name 元素的属性，值是一个object，包含一个或多个 验证方法

所以，cardExpYear 必须指向某些元素的name 属性。更改select 的name 应该可以解决问题。

这是修改后的代码sn-p：

另外，修改了CCExp方法中的条件，只在选择了月份和年份时才给出错误。

$('#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.');

<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="cardExpYear" 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="cardExpYear" 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>
  <input type="submit" />
</form>