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

Credit Card Expiry Date validation in Jquery

本文关键字：日期 验证 过期 信用卡 Jquery      更新时间：2023-09-26

虽然这个问题以前也被问过，但它不适合我。所以我问这个问题。我想申请信用卡到期日期生效。这意味着如果过期日期在当前日期之前，那么它应该在过期日期下拉框下方打印错误消息。下面是我的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>

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

验证规则将元素与验证方法绑定(例如required等)

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

因此，cardExpYear必须指向某个元素的name属性。更改select的name应该可以达到目的。

下面是修改后的代码片段:

还修改了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>

相关文章：