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>