输入错误日期时显示警报消息答案

【问题标题】：Show alert message when wrong date typed in输入错误日期时显示警报消息
【发布时间】：2023-03-06 06:33:01
【问题描述】：

我已将日期类型输入设置为显示日期不少于 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>

【问题讨论】：

标签： javascript html jquery date input

【解决方案1】：

我推断你使用的是jquery，所以很简单，你需要做以下事情：

定义要在哪个 HTML 标记中显示此警告框。
进行检查。
打印消息。

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

您也可以使用 $.append。

检查以下链接：

使用更适合您问题的那个。

【讨论】：

【解决方案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>

【讨论】：

所以我必须在此行“$('#emp_dob').attr('max', maxDate);”之后添加您建议的行吗？

【解决方案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>

【讨论】：