我有信用卡到期日期字段。下面的代码用户输入月份和年份
<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);
}
});
我希望当用户输入小于当前月份或年份的到期月份或年份时,按钮将被禁用,而当用户输入大于当前月份或年份的到期月份或年份时,将启用按钮。
问题是,当用户输入小于当前月份或年份的到期月份或年份时,按钮不会被禁用
最佳答案
有几个问题。一是因为您没有删除 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/>
关于php - 禁用基于 jquery 中的信用日期到期日期验证的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50694161/