使用模糊进行验证时,使用jquery datepicker触发意外验证

时间:2012-11-25 11:03:26

标签: jquery jquery-ui jquery-ui-datepicker

我已将屏蔽添加到jquery datepicker&增加了验证。

这里是jsfiddle&代码

<input class="datepicker" type="text" />
<br /><br />
<input type="button" style="width:50px;" />

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy'});
$(".datepicker").mask("99-aaa-9999");

$(".datepicker").blur(function(){
var date1 = $(this).val(); 

    var validate = IsValidDate(date1);
    if(!validate ){
        alert("Invalid Date formart, Required Date Format : dd-mmm-yyyy");
    $(this).val("");
}
   });

function IsValidDate(myDate) {
                var filter = /^([012]?\d|3[01])-([Jj][Aa][Nn]|[Ff][Ee][bB]|[Mm][Aa][Rr]|[Aa][Pp][Rr]|[Mm][Aa][Yy]|[Jj][Uu][Nn]|[Jj][u]l|[aA][Uu][gG]|[Ss][eE][pP]|[oO][Cc]|[Nn][oO][Vv]|[Dd][Ee][Cc])-(19|20)\d\d$/
                                return filter.test(myDate);
            }

现在我遇到了一个问题。当用户尝试从日历中选择日期时,验证将触发,这不应该发生。

任何人都可以在我的代码中提出错误的建议。谢谢:))

我已经设法解决了这个问题,但不知道它是否是最有效的方式

这是更新的代码&amp;链路

http://jsfiddle.net/smdvA/191/

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy'});
$(".datepicker").mask("99-aaa-9999");

$(".datepicker").blur(function(){
    var date1 = $(this).val(); 
    if(date1 != ""){
    var validate = IsValidDate(date1);
    if(!validate ){
        alert("Invalid Date formart, Date Format : dd-MMM-yyyy");
        $(this).val("");}}
});

function IsValidDate(myDate) {
                var filter = /^([012]?\d|3[01])-([Jj][Aa][Nn]|[Ff][Ee][bB]|[Mm][Aa][Rr]|[Aa][Pp][Rr]|[Mm][Aa][Yy]|[Jj][Uu][Nn]|[Jj][u]l|[aA][Uu][gG]|[Ss][eE][pP]|[oO][Cc]|[Nn][oO][Vv]|[Dd][Ee][Cc])-(19|20)\d\d$/
                                return filter.test(myDate);
            }

1 个答案:

答案 0 :(得分:1)

使用datepicker的“onselect”作为优于“blur”的首选方式:

$( ".datepicker" ).datepicker({ dateFormat: 'dd-M-yy', onSelect: function(date) { 
        var validate = IsValidDate(date);

        if(!validate)
        {
            alert("Invalid Date formart, Date Format : dd-MMM-yyyy");
            $(this).val("");
        }
}});