輸入錯誤日期時顯示警報消息

Question

我已將日期類型輸入設置為顯示日期不小於 18 年的日歷，以避免用戶選擇小於 18 歲的日期。 但問題是用戶仍然能夠手動輸入錯誤的日期。 有沒有辦法在輸入小於 18 年的日期時顯示警報消息並清空輸入？

           $(function(){
                var dtToday = new Date();
            
                var month = dtToday.getMonth() + 1;// jan=0; feb=1 .......
                var day = dtToday.getDate();
                var year = dtToday.getFullYear() - 18;
                if(month < 10)
                    month = '0' + month.toString();
                if(day < 10)
                    day = '0' + day.toString();
                var minDate = year + '-' + month + '-' + day;
                var maxDate = year + '-' + month + '-' + day;
                $('#emp_dob').attr('max', maxDate);
            });

 <div class="form-group">
        <label>Date of Birth</label>
        <input type="date" name="emp_dob" id="emp_dob" class="form-control">
    </div>

Answer 1

我推斷您使用的是 jquery，所以很簡單，您需要執行以下操作：

1. 定義要在哪個 HTML 標記中顯示此警報框。
2. 進行檢查。
3. 打印消息。

if (year < 18) {
  $('.error-div').html("You can't choose less than 18 years");
}

您也可以使用 $.append。

檢查以下鏈接：

• https://api.jquery.com/html/
• https://api.jquery.com/append/#append-content-content
• https://api.jquery.com/text/#text

使用更適合您的問題的一種。

Answer 2

您已經擁有不允許選擇距今天日期小於 18 年的日期的日期選擇器。 所以恕我直言，對不可能的選擇發出警報似乎是不可行的。

但是，如果你想這樣做，你必須像這樣創建一個新條件：

if ( year < 18 ) {
   alert("You must be 18 years of age");
}

 $(function(){ var dtToday = new Date(); var month = dtToday.getMonth() + 1;// jan=0; feb=1 ....... var day = dtToday.getDate(); var year = dtToday.getFullYear() - 18; if(month < 10) month = '0' + month.toString(); if(day < 10) day = '0' + day.toString(); var minDate = year + '-' + month + '-' + day; var maxDate = year + '-' + month + '-' + day; $('#emp_dob').attr('max', maxDate); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script> <div class="form-group"> <label>Date of Birth</label> <input type="date" name="emp_dob" id="emp_dob" class="form-control"> </div>

Answer 3

每個 HTML <input>元素都會觸發一系列事件。 例如，如果您向日期輸入添加一個更改事件偵聽器，它會在用戶輸入內容時立即觸發。 所以基本的想法是我們捕捉用戶是否輸入了一些東西並將輸入與目標日期進行比較 - 在​​你的情況下是在 18 歲之前的某個時間。 這樣做的問題是，每次用戶更改單個數字時都會觸發該事件，如果設置了整個日期，則不會只觸發一次。 我們需要做的是等待按下返回鍵，因為它用於實際設置所選日期。

在回調函數中，我們可以將日期與目標日期進行比較並采取相應措施——例如顯示一個警告框。

下面是一個例子：

 let minDate = new Date("2003-07-21"); document.getElementById("emp_dob").addEventListener("keyup", function(e) { if (e.key == "Enter") { if (new Date(e.target.value) > minDate) { alert("Wrong date!"); } } });

 <div class="form-group"> <label>Date of Birth</label> <input type="date" name="emp_dob" id="emp_dob" class="form-control"> </div>