使用 javascript 表单中的日期验证

Question

我正在尝试验证我的表单。 我有一个日期输入，我正在检查以确保日期在 1 到 31 之间，月份在 0 到 12 之间，年份在 1910 到 2019 之间。

到目前为止，这是我的代码：

var date = document.getElementById('dob');
var day = date.substring(0, 2);
var month = date.substring(3, 5);
var year = date.substring(6, 10);

if (year > 2019 || year < 1910) 
{
  valid = false;
  document.getElementById('dateValid').style.display = "inline-block";
} 
else 
{
  document.getElementById('dateValid').style.display = "inline-block";
}

这是我的日期字段的 html 代码：

<div>
   <label for="dob">Date of Birth</label>
    <input type="date" name="dob" id="dob">
    <span class="error" id="dateValid">valid date required</span>

    </div>

我已经对日和月重复了上述内容。 我不确定为什么这不起作用。 任何帮助，将不胜感激。

Answer 1

完整的源代码肯定有助于回答这个问题。 但从我在这里缝制的有限信息来看。 getElementById 会给你元素。 您仍然需要该值。 通过 console.log 检查您在 date 变量中获得的值 由于我不确定元素 'dob'，我无法对此发表评论。 date.value 应该为您提供该字段的值。 下面应该工作：

var date = document.getElementById('dob').value;
var day = date.substring(0, 2);
var month = date.substring(3, 5);

Answer 2

document.getElementById('dob')将返回 html 元素，因此您不能先使用子字符串。 您需要通过.value获取元素值。 我提供了带有输入日期的插图......

 function check() { var date = document.getElementById('dob').value; var day = date.substring(9, 2); var month = date.substring(5, 2); var year = date.substring(0, 4); console.log(year) var valid; if (year > 2019 || year < 1910) { valid = false; //document.getElementById('dateValid').style.display = "inline-block"; } else { valid = true; } console.log(valid) }

 <input type="date" id="dob" onchange="check()">

Answer 3

内置表单验证使用 HTML5 表单验证功能。 此验证通常不需要 JavaScript。 内置表单验证比 JavaScript 具有更好的性能。 但是，虽然高度可定制，但本机验证不像 JavaScript 那样可定制。 文档

 input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }

 <form> <div> <label for="dob">Date of Birth</label> <input type="date" name="dob" id="dob" min="1910-01-01" max="2019-12-31"> <span class="error" id="dateValid">valid date required</span> </div> <input type="submit"> </form>

请注意，Internet Explorer 9 及更早版本不支持输入标记的 max 和 min 属性。