Javascript 来验证依赖于日期的下拉菜单

Question

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

我有一个名为“到达日期”的日历字段，然后是一个下拉菜单，其中包含以下项目，例如一些优惠：

• 无
• 白色报价
• 黑色报价

白色优惠仅在“到达日期”在 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>