使用 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 屬性。