Jquery datepicker：验证日期 mm/dd/yyyy

Posted 2023-05-07

【中文标题】Jquery datepicker：验证日期 mm/dd/yyyy

【英文标题】：Jquery datepicker: validate date mm/dd/yyyy

【发布时间】：2011-02-12 12:35:00

【问题描述】：

我旁边有一个文本框和一个日期选择器，我正在使用 asp.net，用户可以输入日期以及从日期选择器中选择日期。

您将如何验证输入的日期是否正确？

  <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> 

【问题讨论】：

这取决于你对正确日期的定义是什么？

例如 30/30/2008 是无效日期。

【参考方案1】：

我使用这个处理程序来验证输入：

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

希望对某人有用

【讨论】：

如此完美的答案，如此小张旗鼓！

【参考方案2】：

如果您使用的是 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*((\\d4)|(\\d2))([-/]|\\. ?)(\\d1,2)\\4(\\d1,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*(\\d1,2)([-/]|\\. ?)(\\d1,2)(?:\\s|\\2)((\\d4)|(\\d2))(?:\\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" />

【讨论】：

我知道我可以选择使用 asp.net 控件，但我想尝试使用 jquery 验证。

我采用了比较验证器生成的 javascript，并在其周围包装了一个自定义方法

你也可以使用'remote'并在服务器上尝试将其转换为一个只有在它是有效日期时才有效的日期

@Doc，收到此错误：Microsoft JScript 运行时错误：'$.validator' 为空或不是对象

您是否同时引用了 jquery 和 jquery 验证？ (ajax.microsoft.com/ajax/jquery.validate/1.5.5/…)

【参考方案3】：

我混合使用了 Katrin 和 Doc Holiday 的方法，在我称为 isDate 的自定义验证器中使用 datepicker 控件的 parseDate 实用程序方法。

只需将 parseDate 中的格式参数更改为适当的值（参考：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 控件可能不是最佳实践，但到底是什么。 :)

【参考方案4】：

由于您已经在使用 jquery，您可以查看http://bassistance.de/jquery-plugins/jquery-plugin-validation/，它具有很大的验证灵活性..

【讨论】：

我正在使用 bassistance.de 进行表单验证，但我没有找到任何日期验证示例，如果您找到请重定向我。

它有一个日期验证，但它只检查字符串的格式，所以“30/30/2008”是一个有效的日期

@Doc：所以没有真正的方法来检查日期？还是我只能选择使用 asp.net 验证控件？