近期的項目總結中有一個關於日期控件的,之前的項目中對於日期控件的使用一般會有下面幾個情況。
(1) 當點擊可以文本框的時候彈出日歷控件的選擇畫面,手動選擇日歷控件上的時間。這種做法有個極大的好處就是不需要做日期的正確性校驗,一般情況也只是比較FROM和TO的關系,保證日期先后順序的正確性。這個項目中也最常用。
(2) 點擊日歷符號的時候才彈出日歷選擇畫面,文本框的內容可以手動的輸入。這種情況下通常有兩種校驗方式,一種是在文本框的內容輸入后,走js的方法,通過調用日期有效性判斷,報出錯誤信息或者繼續下一步的操作。另外一種就是針對文本框的輸入內容,限定輸入,通過keyup監聽輸入的內容,然后return想要的內容讓一些字符的輸入無效。
(3) 對於文本框的輸入問題,通常情況下通過輸入法的制御來控制只能輸入英文字符和數字的制御,需要在后台做相應的代碼處理,因為IE的文本框很傻,即使你限制了輸入,對於萬能的復制粘貼文本框還是無法拒絕的。
另外一個跟這個校驗關系不大的,就是文本框的無效設定以后,無效的文本內容是取不到的。通常情況下,都是采用隱藏變量的方法來解決。
日期有效性驗證的代碼參照下面的代碼:

1 function isValidateDate(date) { 2 date = $.trim(date); 3 var reg = /^(\d{4})-(\d{2})-(\d{2})$/; 4 reg.exec(date); 5 if (!reg.test(date) && RegExp.$2 <= 12 && RegExp.$3 <= 31) { 6 return false; 7 } 8 var year, month, day; 9 year = parseInt(date.split("-")[0], 10); 10 month = parseInt(date.split("-")[1], 10); 11 day = parseInt(date.split("-")[2], 10); 12 if (! ((1 <= month) && (12 >= month) && (31 >= day) && (1 <= day))) { 13 return false; 14 } 15 if ((month <= 7) && ((month % 2) == 0) && (day >= 31)) { 16 return false; 17 } 18 if ((month >= 8) && ((month % 2) == 1) && (day >= 31)) { 19 return false; 20 } 21 if (month == 2) { 22 if ((year % 400 == 0) || ((year % 4 == 0) && (year % 100 != 0))) { 23 if (day > 29) { 24 return false; 25 } 26 } else { 27 if (day > 28) { 28 return false; 29 } 30 } 31 } 32 return true; 33 }