使用onsubmit驗證日期輸入字段

Question

我到處尋找，但找不到適合我的問題的好代碼。 我有一些輸入字段，用戶正在使用什麼來在線發送他們的請求。 而其中一個字段是日期字段，我想以某種方式驗證那種方式，只有當輸入的日期在今天和8天之前的某個地方纔允許。 例如：如果今天是11月29日，他們將被允許僅在11月21日至29日之間輸入日期，而沒有其他人 並且在他們輸入了錯誤日期時已經顯示一個警告窗口 他們將從minicalendar但該部分已解決，我只需要驗證幫助。 如果有人可以發佈工作代碼，我將非常感激。 謝謝

Answer 1

使用jQuery UI的DatePicker，下面的腳本：

$(function() { 
    var currentDate = new Date(); 
    var maxAllowedDate = new Date(currentDate); 
    maxAllowedDate.setDate(currentDate.getDate() + 8); 
    $("#datepicker").datepicker({ 
     changeYear: true, 
     minDate: '0', 
     maxDate: '+7D', 
    }); 
    $('#datepicker').change(function(){ 
    var enteredVal = new Date(this.value); 
     if(enteredVal.getTime() < currentDate.getTime() || enteredVal.getTime() > maxAllowedDate.getTime()) { 
      alert("invalid"); 
     } else { 
      alert("valid"); 
     } 
    }); 
}); 

和UI：

<div class="demo"> 

<p>Date: <input type="text" id="datepicker"></p> 

這裏是的jsfiddle演示：http://jsfiddle.net/pjkz7k0t/1/

Answer 2

既然你問對JavaScript ，我會假設你想要一個JavaScript的答案，而不是一個jQuery的答案。

function isValidDate(checkDate) { 
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) { 
     // split checkDate into three pieces 
     var strMM = checkDate.split('/')[0]; 
     var strDD = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

     // create new Date() object from split pieces 
     var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

     // evaluate each piece of resulting date object against each corresponding piece of checkDate 
     if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) { 
      /* if you wish, add additional validation constraints here */ 
      return true; // all three pieces match exactly 
     } 
    } 
    return false; // did not meet criteria for return true 
} 

此方法使用顯式正則表達式來驗證格式。

我沒有創建測試每件作品的詳細方法，而是使用這些作品構建一個新的Date（）對象，知道結果MIGHT不匹配checkDate，並使用結果日期中的作品測試傳入的checkDate塊功能。如果所有三件匹配，則輸入的日期有效。

例如：

'02 /二千〇一十四分之二十九' 返回false

'02/29/2012' ，則返回true

'12 /二千〇一十四分之三十六' 返回false

'29/06/2014' 返回false

的代碼是純javascript從而提高便攜性，並且該方法不干擾或通過任何其他標準喲阻礙額外驗證ü選擇使用（針對今年範圍，或對今日評估strCheckDate（），或任何其他特定限制您的具體應用程序）。

另一個好處是，此方法不僅可以確定傳遞給函數的內容是否可用於創建有效日期，而且可確認輸入的日期與可創建的有效日期相匹配（從而克服了問題在創建日期時向前滾動「額外日子」的JavaScript）。

這可以很容易地擴展，以測試日期的各種配置中，使用完全相同的邏輯，簡單地通過創建不同的正則表達式的測試，和分割了checkdate不同。

正則表達式DD/MM/YYYY將是相同的，但分裂是這樣的：

 // split characters into three pieces 
     var strDD = checkDate.split('/')[0]; 
     var strMM = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

或爲YYYY/MM/DD你可以使用正則表達式：

 /\d\d\d\d\/\d\d\/\d\d/.test(checkDate) 

和分割是這樣的：

 // split characters into three pieces 
     var strYYYY = checkDate.split('/')[0]; 
     var strMM = checkDate.split('/')[1]; 
     var strDD = checkDate.split('/')[2]; 

這是高度可變形的（乾淨）的JavaScript代碼來完成瓦利的目的約會用戶輸入的日期，並可以快速修改以擴大範圍內有效日期的檢查。

function isValidDateRange(checkDate,minDate,maxDate) { 
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) { 
     // split checkDate into three pieces 
     var strMM = checkDate.split('/')[0]; 
     var strDD = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

     // create new Date() object from split pieces 
     var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

     // evaluate each piece of resulting date object against each corresponding piece of checkDate 
     if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) { 
      // if this code fires, you have a valid date entered, first logic hurdle passed 
      // If you pass in minDate and maxDate as any format other than a date object, you should 
      // create new Date(); from them before comparing. 
      // Example: 
      // var strMinMM = minDate.split('/')[0]; 
      // var strMinDD = minDate.split('/')[1]; 
      // var strMinYYYY = minDate.split('/')[2]; 
      // minDate = new Date(strMinYYYY,(strMinMM - 1),strMinDD); 
      // var strMaxMM = maxDate.split('/')[0]; 
      // var strMaxDD = maxDate.split('/')[1]; 
      // var strMaxYYYY = maxDate.split('/')[2]; 
      // maxDate = new Date(strMaxYYYY,(strMaxMM - 1),strMaxDD); 
      if((!strDateCheck < minDate) && (!strDateCheck > maxDate)) { 
       return true; // all three pieces match exactly AND date is within specified range 
      } 
     } 
    } 
    return false; // did not meet criteria for return true 
}