验证日期输入 - 最小值和最大值

Validation date input - min and max value

本文关键字：最大值 最小值 日期 输入 验证      更新时间：2023-09-26

我对HTML5有一个小问题。

<input type="date" id="birthday" />

我想在 JavaScript 中检查此字段。

最小值 - 01-01-1990。

我不知道如何解析日期对象并检查是否正确。

HTML5 中的属性最小值和最大值不起作用。我必须用 JavaScript 编写验证。

您可以使用 JavaScript 验证库，该库使用 HTML5 输入属性，如 min 和 max：例如 jQuery Validation：

<input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required />
<script>
    $("#mydate").validate();
</script>

看看这个小提琴作为一个工作的例子：http://jsfiddle.net/a5Mvt/1/

此外，您可能希望使用像 Modernizr 这样的库来检查浏览器对input[type="date"]的支持，并使用 jQuery UI 中的日期选取器控件或类似控件（如果不支持）。

更新：这是一个不使用jQuery或任何其他附加库的版本：

<input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required />
<span id="mydate_error" style="display:none;"></span>
<script>
    var mydate = document.getElementById('mydate'),
        mydateError = document.getElementById('mydate_error');
    mydate.addEventListener('input', function() {
        if (!mydate.value.match(/'d{4}-'d{1,2}-'d{1,2}/)) {
            mydateError.innerHTML = 'Please specify a valid date in the form 1990-02-22';
            mydateError.style.display = 'inherit';
        } else {
            var value = new Date(mydate.value),
                min = new Date(mydate.min),
                max = new Date(mydate.max);
            if (value < min || value > max) {
                mydateError.innerHTML = 'Date has to be between ' + min.toDateString() + ' and ' + max.toDateString();
                mydateError.style.display = 'inherit';
            } else {
                mydateError.style.display = 'none';
            }
        }
    });
</script>

更新的小提琴：http://jsfiddle.net/a5Mvt/2/

相关文章：