键入错误日期时显示警报消息

vtwuwzda  于 2021-09-23  发布在  Java
关注(0)|答案(3)|浏览(250)

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

cbwuti441#

我推断您正在使用jquery,因此非常简单,您需要执行以下操作:
定义要在哪个html标记中显示此警报框。
做检查。
打印消息。

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-内容
https://api.jquery.com/text/#text
使用一个更适合你的问题。

u7up0aaq

u7up0aaq2#

您已经有了日期选择器,不允许选择距离今天日期不足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>
qmelpv7a

qmelpv7a3#

每个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>

相关问题