Javascript日期驗證
Javascript在動態網頁前端的最大應用即在於預先資料驗證，
可有效減低後端伺服器運算與錯誤處理壓力。而其中資料驗證
最麻煩的地方又在於日期的驗證。
可有效減低後端伺服器運算與錯誤處理壓力。而其中資料驗證
最麻煩的地方又在於日期的驗證。
舉凡日期格式、日期長度、日期正確性等都不易檢核。誠然，
許多系統會用到免費的Javascript萬年曆讓使用者進行日期點
選，但在點選大範圍日期上又顯的麻煩，必須保留手動輸入的
餘地。而此時的日期檢核常令網頁開發者十分頭痛。
許多系統會用到免費的Javascript萬年曆讓使用者進行日期點
選，但在點選大範圍日期上又顯的麻煩，必須保留手動輸入的
餘地。而此時的日期檢核常令網頁開發者十分頭痛。
我們藉由幾個Javascript functions，可以針對使用者手動輸
入的日期進行格式檢核與限定，甚至日期存在與否皆可驗證。
諸如2006/02/30這種不存在的日期，與2008/02/29這樣四年才
一次的特殊日子(替這天生日的人默哀一下)～
入的日期進行格式檢核與限定，甚至日期存在與否皆可驗證。
諸如2006/02/30這種不存在的日期，與2008/02/29這樣四年才
一次的特殊日子(替這天生日的人默哀一下)～
<html>
<head>
<title>Javascript日期檢核，檢核輸入樣式與日期正確性</title>
</head>
<head>
<title>Javascript日期檢核，檢核輸入樣式與日期正確性</title>
</head>
<script language="javascript">
function y2k(number)
{return (number<1000) ? number+1900 : number;}
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);
{
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;}
}
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>
{
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>
<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>
參考資料：
回憶的次元空間 
發表留言