Javascript 校驗時間 不經過則禁止數據提交

在form表單中有時間選擇框,默認在進入頁面後會自動輸入當前時間進去,可是防止在填寫表單後,時間框中沒有選擇時間,那麼這個結束時間就會比當時實際時間要小,形成後臺定時任務刷新不到,也就沒法自動結束當前任務,時間選擇框以下:javascript

image.png

首先定義判斷時間輸入的函數:java

第一個是時間選擇器函數,第二個是檢查時間的函數app

<script type="text/javascript">
    $('input[name="end_time"]').daterangepicker({
        "autoApply": true, //選擇日期後自動提交;只有在不顯示時間的時候起做用timePicker:false
        singleDatePicker: true, //單日曆
        showDropdowns: true, //年月份下拉框
        timePicker: true, //顯示時間
        timePicker24Hour: true, //時間制
        timePickerSeconds: true, //時間顯示到秒
        startDate: moment().startOf('day'), //設置開始日期
        endDate: moment().startOf('day').add(6, 'hour'),
        minDate: moment(new Date()), //設置最小日期
        "opens": "center",
        showWeekNumbers: true,
        locale: {
            format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式
            applyLabel: '肯定', //肯定按鈕文本
            cancelLabel: '取消', //取消按鈕文本
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            firstDay: 1
        },
    }, function (start) {
        console.log(start.format('YYYY-MM-DD HH:mm:ss'));
    });

    function checkTime() {
        var end_time = document.getElementById("end_time").value;//時間選擇框中傳入的時間
        var end = new Date(end_time);
        var now = new Date();//當前時間
        if (end.valueOf() > now.valueOf()) {
            return true;//返回true,表示時間輸入合理
        } else {
            alert('結束時間須大於當前實際時間10分鐘,請從新選擇結束時間...');
            return false;//時間選擇不合理,禁止提交數據
        }
    }
</script>

在提交按鈕中引用時間檢查函數:ide

<div class="col-sm-offset-2 col-sm-10">
    <button type="submit" value="submit" onclick="return checkTime()" class="btn btn-outline-info btn-sm">提交</button>
</div>

下面能夠驗證下,輸入比當前實際時間小的時間是沒法提交表單的函數

image.png

相關文章
相關標籤/搜索