我对 HTML5 有一个小问题。
<input type="date" id="birthday" />
我想在 JavaScript 中检查这个字段。
分钟。价值 - 01-01-1990。
我不知道如何解析日期对象并检查它是否正确。
HTML5 中的属性 min 和 max 不起作用。我必须用 JavaScript 编写验证。
我对 HTML5 有一个小问题。
<input type="date" id="birthday" />
我想在 JavaScript 中检查这个字段。
分钟。价值 - 01-01-1990。
我不知道如何解析日期对象并检查它是否正确。
HTML5 中的属性 min 和 max 不起作用。我必须用 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或类似工具的 datepicker 控件。
更新:这是一个不使用 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/