Javascript日期驗證

Javascript日期驗證
 
Javascript在動態網頁前端的最大應用即在於預先資料驗證,
可有效減低後端伺服器運算與錯誤處理壓力。而其中資料驗證
最麻煩的地方又在於日期的驗證。
 
舉凡日期格式、日期長度、日期正確性等都不易檢核。誠然,
許多系統會用到免費的Javascript萬年曆讓使用者進行日期點
選,但在點選大範圍日期上又顯的麻煩,必須保留手動輸入的
餘地。而此時的日期檢核常令網頁開發者十分頭痛。
 
我們藉由幾個Javascript functions,可以針對使用者手動輸
入的日期進行格式檢核與限定,甚至日期存在與否皆可驗證。
諸如2006/02/30這種不存在的日期,與2008/02/29這樣四年才
一次的特殊日子(替這天生日的人默哀一下)~
 
 
<html>
 <head>
  <title>Javascript日期檢核,檢核輸入樣式與日期正確性</title>
 </head>
 
<script language="javascript">
function y2k(number)
{return (number<1000) ? number+1900 : number;}
 
function checkDateExist(day, month, year)
{
 var today=new Date();
 year=((!year) ? y2k(today.getYear()):year);
 month=((!month) ? today.getMonth():month-1);
 
 if(!day){return false;}
 var test=new Date(year,month,day);
 if((y2k(test.getYear()) == year) && (month == test.getMonth()) && (day == test.getDate()))
 {return true;}
  else
 {return false;}
}
 
function checkDate()
{
 var datePattern=/^\d{4}\/(0[1-9]|1[0-2])\/(3[0-1]|[0-2][0-9])$/;
 var dates=document.form1.dates.value;
 if(dates.match(datePattern))
 {
  if(checkDateExist(dates.substring(8, 10), dates.substring(5, 7), dates.substring(0, 4))==true)
  {alert("輸入日期正確!");}
   else
  {
   alert("火星曆法!?輸入的日期在地球不存在喔。");
   document.form1.dates.focus();
  }
 }
  else
 {
  alert("日期格式錯誤!\n請依照下列格式輸入日期:\n\n[ yyyy/MM/dd ]");
  document.form1.dates.focus();
 }
}
</script>
 
 <body onLoad="javascript:document.form1.dates.focus()">
  <form name="form1">
   請依照<font color="#990000" size=-1>yyyy/mm/dd</font>格式輸入日期
   <input type="text" name="dates" id="dates" size="12" maxlength="10">
   <input type="button" value="檢核日期" onClick="javascript:checkDate()">
  </form>
 </body>
</html>
 
 

參考資料:

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s