Jquery datepicker：验证日期mm / dd / yyyy [英] Jquery datepicker: validate date mm/dd/yyyy

问题描述

我有一个文本框和一个datepicker旁边，我使用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> 
  

解决方案

如果您使用ASP.NET，使用ASP.NET比较验证器[ ASP.NET Date Validator ]。

 < asp：TextBox ID =tbrunat =server < / asp：TextBox> 
 
< asp：CompareValidator ID =cvrunat =server
 ControlToValidate =tbErrorMessage =*请输入有效的日期！ Text =*
 Operator =DataTypeCheckType =Date>< / asp：CompareValidator> 
  

****更新**

我拿起了上面比较验证器执行的javascript，并在其周围包装了一个自定义的jQuery验证方法：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 $ .validator.addMethod（truedate，function（value，element，params）{
 function GetFullYear ，params）{
 var twoDigitCutoffYear = params.cutoffyear％100; 
 var cutoffYearCentury = params.cutoffyear  -  twoDigitCutoffYear; 
 return（（year> twoDigitCutoffYear）？（cutoffYearCentury  -  100 + year） ：（cutYearCentury + year））; 
} 
 
 var yearFirstExp = new RegExp（^ \\s *（（\\\d {4}）|（\ \d {2}））（[ -  /] | \\。？）（\\d {1,2}）\\4（\\d {1,2}） \\。？\\s * $）; 
尝试{
m = value.match（yearFirstExp）; 
 var日，月，年; 
如果（m！= null&&&（m [2] .length == 4 || params.dateorder ==ymd））{
 day = m [6]; 
 month = [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\\\г\\。）？\\s * $）; 
 m = value.match（yearLastExp）; 
 if（m == null）{
 return null; 
} 
 if（params.dateorder ==mdy）{
 day = m [3]; 
 month = m [1]; 
} 
 else {
 day = m [1]; 
 months = m [3]; 
} 
 year =（m [5] .length == 4）？ m [5]：GetFullYear（parseInt（m [6]，10））; 
} 
月 -  = 1; 
 var date = new Date（年，月，日）; 
 if（year< 100）{
 date.setFullYear（year）; 
} 
 return（typeof（date）==object&& year == date.getFullYear（）&& month == date.getMonth（）&& = date.getDate（））？ date.valueOf（）：null; 
} 
 catch（err）{
 return null; 
} 
}，请输入实际日期。）; 
 
 $（＃form1）。validate（）; 
 
 $（＃one）。rules（'add'，
 {
 truedate：{
 cutoffyear：'2029'，
 dateorder： 'mdy'
} 
}）; 
}）; 
 
< / script> 
 
< input id =one/> 
  

I have a textbox and a datepicker next to it and I am using asp.net and the user can enter the date as well select the date from datepicker.

How would you validate if the date is entered correct?

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

解决方案

If you're using ASP.NET, you can use an ASP.NET Compare Validator [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>

**** Update**

I took the javascript that was executed by the Compare Validator above and wrapped a custom jQuery Validation method around it:

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

这篇关于Jquery datepicker：验证日期mm / dd / yyyy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！