JavaScript验证日期依赖的下拉菜单

Question

我恳请问有没有人可以如此友好地为我的表单写一个验证码。

我有一个字段名为“arrivaldate”日历和比包含下列项目的下拉式选单，例如可以为一些优惠：

• 没有
• 白色报价
• 黑色报价

白色报价仅在“到期日”在4月1日至25日之间时有效

黑色报价仅在“到期日”在4月20日至5月15日之间有效

因此，如果用户按下“发送”按钮并选择“白色报价”并在日期中选择“到达日期”与4月1日至25日不同，验证会提供错误“此优惠在选定期限内无效”。

从现在开始，我真的很感谢你的帮助，我提前感谢你。

亲切的问候

菲利波

Answer 1

请试试这个，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"> 
<script> 
    $(document).ready(function(){ 

     $('#arrivaldate').datepicker({ 
      format: 'yyyy/mm/dd' 
     }); 

     $("#btn").on('click',function(){ 
      var arrival_date = $('#arrivaldate').val(); 
      var offer = $('#offer').val(); 
      var dateArrival = new Date(arrival_date); 
      if(arrival_date=='' || offer==''){ 
       alert('please fill the fields'); 
      } 
      if(offer == '1'){ 
       if(dateArrival <= new Date('2016-04-01') || dateArrival >= new Date('2016-04-25')){ 
        alert('White Offer Not Valid'); 
       }else{ 
        alert('White Offer Valid'); 
       } 
      }else if(offer == '2' && arrival_date!=''){ 
       if(dateArrival <= new Date('2016-04-20') || dateArrival >= new Date('2016-05-15')){ 
        alert('Black Offer Not Valid'); 
       }else{ 
        alert('Black Offer Valid'); 
       } 
      } 
     }); 
    }); 
</script> 

<form id="demoform"> 
    <div> 
     Arrival Date: <input type="text" id="arrivaldate" class="form-control" data-provide="datepicker" style="width:200px"/> 
    </div> 
    <br/> 
    <div> 
     Offers: 
     <select id="offer" class="form-control" style="width:200px"> 
      <option value="0">None</option> 
      <option value="1">White Offer</option> 
      <option value="2">Black Offer</option> 
     </select> 
    </div> 
    <br/> 
    <div> 
     <button class="btn btn-info" type="button" id="btn">Submit</button> 
    </div> 
</form>