Javascript根据日期验证下拉菜单

Javascript to validate a dropdown menu dependent by date

本文关键字：验证 下拉菜单 日期 Javascript      更新时间：2023-09-26

请问是否有人可以为我的表单编写验证代码。

我有一个名为"到达日期"的日历字段，还有一个下拉菜单，其中包含以下项目，例如一些优惠:

  • 白色提供
  • 黑色提供

白色优惠仅在"到货"日期为4月1日至25日期间有效

黑色报盘仅在"到货"日期为4月20日至5月15日之间有效

因此，如果用户在选择"白色优惠"的情况下按下"发送"按钮，并且选择的"到达日期"不是4月1日到4月25日，则验证会给出"此优惠在所选期间无效"的错误。

非常感谢您一直以来的帮助，提前感谢您。

亲切的问候菲利普

请尝试一下，

<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>
相关文章：