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