jquery datepicker：驗證日期mm/dd/yyyy

Question

我在它旁邊有一個文本框和一個日期選擇器，我使用asp.net，用戶可以輸入日期以及從datepicker中選擇日期。

如果日期輸入正確，您將如何驗證？

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#<%=StartDate.ClientID%>').datepicker({ showOn: 'button', 
        buttonImage: '../images/Calendar.png', 
        buttonImageOnly: true, onSelect: function() { }, 
        onClose: function() { $(this).focus(); } 
      }); 
     }); 
    </script> 

Answer 1

如果您使用ASP.NET，您可以使用ASP.NET比較驗證[ASP.NET Date Validator。

<asp:TextBox ID="tb" runat="server"></asp:TextBox> 

<asp:CompareValidator ID="cv" runat="server" 
ControlToValidate="tb" ErrorMessage="* Please enter a valid date!" Text="*" 
Operator="DataTypeCheck" Type="Date"></asp:CompareValidator> 

****更新**

我拿了這是由比較驗證上面執行的JavaScript和包裹着它的自定義jQuery驗證方法：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $.validator.addMethod("truedate", function (value, element, params) { 
      function GetFullYear(year, params) { 
       var twoDigitCutoffYear = params.cutoffyear % 100; 
       var cutoffYearCentury = params.cutoffyear - twoDigitCutoffYear; 
       return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year)); 
      } 

      var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$"); 
      try { 
       m = value.match(yearFirstExp); 
       var day, month, year; 
       if (m != null && (m[2].length == 4 || params.dateorder == "ymd")) { 
        day = m[6]; 
        month = m[5]; 
        year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 
       } 
       else { 
        if (params.dateorder == "ymd") { 
         return null; 
        } 
        var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$"); 
        m = value.match(yearLastExp); 
        if (m == null) { 
         return null; 
        } 
        if (params.dateorder == "mdy") { 
         day = m[3]; 
         month = m[1]; 
        } 
        else { 
         day = m[1]; 
         month = m[3]; 
        } 
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 
       } 
       month -= 1; 
       var date = new Date(year, month, day); 
       if (year < 100) { 
        date.setFullYear(year); 
       } 
       return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null; 
      } 
      catch (err) { 
       return null; 
      } 
     }, "Please enter an actual date."); 

     $("#form1").validate(); 

     $("#one").rules('add', 
     { 
      truedate: { 
       cutoffyear: '2029', 
       dateorder: 'mdy' 
      } 
     }); 
    }); 

</script> 

<input id="one" /> 

Answer 2

既然你已經使用jQuery，你可以檢查出http://bassistance.de/jquery-plugins/jquery-plugin-validation/，它具有很大的靈活性驗證..

Answer 3

我使用這個處理程序驗證輸入：

onClose: function(dateText, inst) { 
     try { 
      $.datepicker.parseDate('dd/mm/yy', dateText); 
     } catch (e) { 
      alert(e); 
     }; 

希望，這將是爲別人

Answer 4

我使用卡特琳​​&文件度假的做法的混合有用，使用日期選擇控件的parseDate實用工具方法自定義驗證我叫而isDate。

只需將parseDate中的format參數更改爲相應的值（參考：http://docs.jquery.com/UI/Datepicker/parseDate）。

$(document).ready(function() 
    { 
     $.validator.addMethod('isDate', function(value, element) 
     { 
      var isDate = false; 
      try 
      { 
       $.datepicker.parseDate('dd/mm/yy', value); 
       isDate = true; 
      } 
      catch (e) 
      { 

      } 
      return isDate; 
     }); 

     $("#form1").validate(); 

     $("#dateToValidate").rules("add", { isDate: true, messages: {isDate: "Date to Validate is invalid."} }); 
    }); 

這可能不是驗證者引用UI控件的最佳實踐，但是到底是什麼。 :)