JAVASCRIPT 比較日期大小與驗證日格式--CTO

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>比較日期大小</title>
  6.     </head>
  7. <script language="javascript">
  8.    function starts() {
  9.     //最大日期
  10.     var maxDate = document.getElementById("maxDate").value;
  11.     //最小日期
  12.     var minDate = document.getElementById("minDate").value;
  13.     if maxDate != "" && minDate != "") {
  14.         //驗證日期格式正則表達式,格式爲 yyyy-MM-dd
  15.         var reg = /^(/d{4})-(/d{2})-(/d{2})$/;
  16.         //校驗日期格式
  17.         if (!reg.test(maxDate.value) && RegExp.$2 <= 12 && RegExp.$3 <= 31) {
  18.             alert("最大日期格式錯誤,格式應爲yyyy-MM-dd");
  19.             return false;
  20.         }
  21.         //校驗日期格式
  22.         if (!reg.test(minDate.value) && RegExp.$2 <= 12 && RegExp.$3 <= 31) {
  23.             alert("最小日期格式錯誤,格式應爲yyyy-MM-dd");
  24.             return false;
  25.         }
  26.         // 用 - 分隔符將日期分開
  27.         var maxDateSplit = maxDate.split("-");
  28.         var minDateSplit = minDate.split("-");
  29.         // 創建 Date 對象
  30.         var maxDateValue = new Date(maxDateSplit[0], maxDateSplit[1], maxDateSplit[2]);
  31.         var minDateValue = new Date(minDateSplit[0], minDateSplit[1], minDateSplit[2]);
  32.         if (minDate >= maxDate) {
  33.             alert("你輸入的最小日期大於或等於了最大日期!!!");
  34.             return false;
  35.         }
  36.     }else{
  37.         alert("請輸入最大或最小日期!!!");
  38.         return false;
  39.     }
  40.     return true;
  41.   }
  42. </script>
  43. <body bgcolor="EFF7FC">
  44.     <center>
  45.         <table>
  46.             <tr>
  47.                 <td>最大日期:</td>
  48.                 <td><input type="text" onclick="WdatePicker();" name="maxDate"/></td>
  49.             </tr>
  50.             <tr>
  51.                 <td>最小日期:</td>
  52.                 <td><input type="text" onclick="WdatePicker();" name="minDate"/></td>
  53.             </tr>
  54.             <tr>
  55.                 <td colspan="2"><a href="#" onclick="starts();">start test</a></td>
  56.             </tr>
  57.         </table>
  58.     </center>
  59. </body>
  60. </html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章