php - 在 jquery 中禁用基于信用日期到期日期验证的按钮

Question

我有信用卡到期日字段。在代码下方用户输入月份和年份

<input class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>
<input class="expiry-year exp" name="card_exp_year" id="card_exp_year" required>

我从 php date() 函数获取当前的月份和年份。

<?php
$month= date('n');
$year= date('y');
?> 
<input type="text" name="curr_month" id="curr_month" value="<?php echo $month;?>"/>
<input type="text" name="curr_year" id="curr_year" value="<?php echo $year;?>"/>

当用户输入比当前月份或年份更短的到期月份或年份时，此按钮将被禁用

<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" />

和jquery代码

$( ".exp" ).keyup(function() {
var exp_month = $("#card_exp_month").val();
var exp_year = $("#card_exp_year").val();

var curr_month = $("#curr_month").val();
var curr_year = $("#curr_year").val();


if(exp_month < curr_month  || exp_year < curr_year){
    $("#billing_nxtBtn").attr("disabled",true);
}else if(exp_month > curr_month  || exp_year > curr_year) {
    $("#billing_nxtBtn").attr("disabled",false);
} 
});

我希望当用户输入过期月份或年份小于当前月份或年份时，按钮将被禁用，当用户输入过期月份或年份大于当前月份或年份时，按钮将被启用。

问题是，当用户输入的过期月份或年份小于当前月份或年份时，按钮不会被取消

Answer 1

有几个问题。一个是因为您没有删除 disabled 属性；您需要使用 removeAttr()。您的逻辑也有缺陷，就好像我选择了 01/2019 然后该按钮将被禁用，因为该月份小于当前月份 - 您没有考虑年份。

您还可以进行一些逻辑上的改进，例如使用 input 而不是 keyup(以防人们复制+粘贴值，或使用其他输入方法用于可访问性)并使用 prop() 而不是 attr()。这样您就可以简单地提供 bool 条件作为参数。

仅供引用，这一点也不安全；它很容易坏掉。您应该仅出于礼貌向用户提供此客户端验证，并在服务器端进行业务关键日期检查。

说了这么多，试试这个:

$(".exp").on('input', function() {
  var exp_month = $("#card_exp_month").val();
  var exp_year = $("#card_exp_year").val();

  var curr_month = $("#curr_month").val() || 0;
  var curr_year = $("#curr_year").val() || 0;

  $("#billing_nxtBtn").prop('disabled', exp_year < curr_year || (exp_year == curr_year && exp_month < curr_month));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>
<input class="expiry-year exp" name="card_exp_year" id="card_exp_year" required><br />

<input type="text" name="curr_month" id="curr_month" value="6" />
<input type="text" name="curr_year" id="curr_year" value="18" />

<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" disabled/>