使用带有过期日期的jquery

时间：2016-08-04 02:07:24

标签： javascript jquery

我可以获得任何帮助来完成我为我的网站所做的代码。我正在使用jquery，这个代码所做的是它在客户可以再次重新申请之前首先检查申请的重新审核日期（到期日期），所以基本上他们只能在当前申请到期日的4周内重新申请。

e.g。如果某人申请于2016年8月31日到期，则意味着他们只能在2016年8月3日至2016年8月31日期间重新申请，具体为4周。申请持续3年。

我提供了我的代码及其工作但我不知道这是否是正确的条件，它只是隐藏了应用按钮，如果失效日期仍然没有。

$(document).ready(function(){

    var current = new Date();
    var expiry = new Date($("#mcs_nextrecertdate").val());

    if(current.getTime() > expiry.getTime()){
        $("#NextButton").show();
    }
    else {
        $("#NextButton").hide();
    }

编辑：我根据这些日期测试我从答案中收到的代码，可以在2016年8月27日重新申请，第二个是2019年7月20日无法重新申请的日期

3 个答案:

答案 0 :(得分：1)

鉴于你对问题的疑问和解释，我想指出一些我做过的观察

1。日期验证

var expiry = new Date($("#mcs_nextrecertdate").val());

无论#mcs_nextrecertdate是什么，我都假设你已经确定这个“input”元素的值被正确格式化了。否则你将得到一个JS脚本错误，整个事情将破坏

2。逻辑错误

根据您的解释，用户只能在当前申请到期日的4周内重新认证。我假设#NextButton是一个触发新应用程序的提交按钮。基于此，这个表达是错误的...... 

if(current.getTime() > expiry.getTime()){...}

因为您告诉您的应用允许用户申请认证 AFTER 当前申请已过期，不在4周内，换句话说，用户只有在申请过期后才能重新申请......而不是之前。

3。服务器验证

这只是一个假设。我还假设这个“客户端逻辑”只是为了为您的应用提供良好的用户体验，并且您正在运行正确的服务器端验证，否则像我这样的高级用户可以轻松绕过客户端验证，欺骗/破解这些“约束”甚至将您的应用程序数据置于不一致状态。

正确逻辑

为了确保用户可以在当前有效期限之前的4周内重新申请，您需要执行以下操作... 

var now = new Date();
var expiry = new Date($("#mcs_nextrecertdate").val());//assuming this has a valid date
var startValidAppDate = new Date($("#mcs_nextrecertdate").val());

//set valid application dates
startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds

if(now < expiry && now > startValidAppDate){
     //ok to apply
     $("#NextButton").show();
}

同样，始终确保您在服务器上进行了强有力的验证。这是一个有效的工具...... 

$(function(){
        $('#txtExpiryDateParent').datetimepicker({
                format: "YYYY-MM-DD"
            });
  
      $("a").click(function(){
          var now = new Date();
          var expiry = new Date($("#txtExpiryDate").val());
          var startValidAppDate = new Date($("#txtExpiryDate").val());

          //set valid application dates
          startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds

          if(now < expiry && now > startValidAppDate){
              $(".info.bg-success").show();
              $(".info.bg-error").hide();
          }
        else{
              $(".info.bg-success").hide();
              $(".info.bg-error").show();
          }
        });
  });
form{
  background-color:#eee;
  max-width:500px;
  padding:30px;
  margin:30px;  
  }

.info{
  padding:20px;
  border-radius:3px;
  text-align:center;
  margin-bottom:20px;
  display:none;
  }
.bg-success{
  background-color:#5cb85c !important;
  }
.bg-error{
  background-color:#d9534f !important;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />


<form class="center-block">
   <div class="info bg-success">You're good to re-certify</div>
   <div class="info bg-error">You can't certify right now</div>
   <div class="form-group">
            <label for="txtExpiryDate">Expiry Date</label>
            <div class='input-group date' id='txtExpiryDateParent'>
                <input id="txtExpiryDate" type='text' name="ExpiryDate" class="form-control" 
                       placeholder="Expiry date..."  />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
  <a class="btn btn-default" href="javascript:void(0)">Validate</a>
</form>

答案 1 :(得分：0)

客户端中的最佳做法是remove您的元素不要隐藏它。 

if(current.getTime() > expiry.getTime()){
    $("#NextButton").show();
}
else {
    $("#NextButton").remove();
}
服务器端中的Ans最佳实践是检查那里的到期日期并呈现没有#NextButton元素的HTML。

答案 2 :(得分：0)

如有疑问，请始终进行测试：

$(document).ready(function(){

var current = new Date();
//var expiry = new Date("August 1, 2014");
var expiry = new Date("August 13, 2017");

if(current.getTime() > expiry.getTime()){
    $("#NextButton").show();
}
else {
    $("#NextButton").hide();
}
});
相关问题
最新问题