Jquery验证插件在Safari浏览器上验证日期格式像20/August/2013有Bug?

4
我使用Jquery Validation插件并验证事件日期,例如:
rules:{
       eventdate: 
       {
       required:true,   
       date: true
       }
     }

日期格式为"23/August/2013"('dd/MM/yy')

但在Safari上运行失败,与Fx、Chrome、Opera等浏览器相比效果更好...

这是Safari的错误还是Jquery验证插件的错误?

我知道Jquery验证插件支持自定义验证,例如:

$.validator.addMethod("customdateValidateRule", function(value, element) 
{  
_isvalidResult=****testfn()***;
return _isvalidResult;
}

我尝试了 jQuery验证插件的自定义日期格式,但是由于它使用的是 dd/mm/yyyy 而不是 ('dd/MM/yy'),所以没有起到帮助作用。对于 "23/August/2013" 的正则表达式,我并不知道!
备注: 1)我正在使用Datepicker(JqueryUi)选择日期。 2)我正在使用Jquery验证插件(最新版)。它将验证很多日期格式,也可以验证 "23/August/2013",但在Safari中测试时,显示为无效,而在FX、Chrome和Opera中则显示为有效。
2个回答

4
问题是因为Safari不能正确处理这个格式。JQuery验证插件工具无法验证此格式(仅在Chrome和Safari中发生)。要解决此问题,请修改验证插件。
如果您想将其定制为dd/mm/yy格式,则可以执行以下操作。
$.validator.addMethod(
   "customdateValidateRule", 
   function(value, element) {
      return value.match(/^\d{1,2}\/\d{1,2}\/\d{2}$/);
   },
      "Input a date format of dd/mm/yy:"
);

将规则验证添加到您的表单中。

$('#myformname')
   .validate({
       rules : {
        myDate : {
          customdateValidateRule : true
        }
       }
   });

如果您想添加测试方法,您应该能够像这样做...
var isdate = function(value) {
    var isvalid = /^(\d{1,2})\/(\d{1,2})\/(\d{2})?$/;   
    return isvalid.test(value);
} 

$.validator.addMethod(
   "customdateValidateRule",
   function(value, element) {
      return isdate(value);
   }
);

如果您需要正则表达式来验证 dd/mm/yyyy,请将其更改为...
/^\d{1,2}\/\d{1,2}\/\d{4}$/

要验证日期 2013年8月23日 的具体信息,您有两个选择。

较为简便的方法:

/^\d{1,2}\/\b[a-zA-Z]+\/\d{4}$/

正则表达式解释:

^              the beginning of the string
 \d{1,2}       digits (0-9) (between 1 and 2 times)
  \/           look for and match '/'
   \b          the boundary between a word char (\w)
    [a-zA-Z]+  any character of: 'a' to 'z', 'A' to 'Z' (1 or more times)
  \/           look for and match '/'
  \d{4}        digits (0-9) (4 times)
$              before an optional \n, and the end of the string

长方法(具体验证):
/^\d{1,2}\/\b(?:Jan(?:uary)?|Feb(?:ruary)?|Mar(?:ch)?|Apr(?:il)?|
                May|Jun(?:e)?|Jul(?:y)?|Aug(?:ust)?|Sept?|September|
                Oct(?:ober)?|Nov(?:ember)?|Dec(?:ember)?)\/\d{4}$/

正则表达式解释:

^                     the beginning of the string
 \d{1,2}              digits (0-9) (between 1 and 2 times)
  \/                  look for and match '/'
   \b                 the boundary between a word char (\w)
    (?:               group, but do not capture:
     Jan(?:uary)?|    'Jan', group but don't capture optional 'uary', OR
     Feb(?:ruary)?|   'Feb', group but don't capture optional 'ruary', OR
     Mar(?:ch)?|      'Mar', group but don't capture optional 'ch', OR
     Apr(?:il)?|      'Apr', group but don't capture optional 'il', OR
     May|             'May', OR
     Jun(?:e)?|       'Jun', group but don't capture optional 'e', OR
     Jul(?:y)?|       'Jul', group but don't capture optional 'y', OR
     Aug(?:ust)?|     'Aug', group but don't capture optional 'ust', OR
     Sept?|           'Sep', 't' optional, OR
     September|       'September', OR
     Oct(?:ober)?|    'Oct', group but don't capture optional 'ober', OR
     Nov(?:ember)?|   'Nov', group but don't capture optional 'ember', OR
     Dec(?:ember)?    'Dec', group but don't capture optional 'ember'
    )                 end of grouping
     \/               look for and match '/'
      \d{4}           digits (0-9) (4 times)
$                     before an optional \n, and the end of the string

3

正如您所说,如果您正在使用JqueryUi Datepicker,则有两种方法:

1)如@hwnd所说,您必须编辑验证器插件。
2)只需添加我的下面的hack即可快乐使用!

    /*Override the validator's Date Validation with mine! */
    $.validator.methods.date=
    function(value, element) {  
    try{
    var _appleDates=$.datepicker.formatDate("mm/dd/yy",$.datepicker.parseDate("dd/MM/yy",value));
    return (!/Invalid|NaN/.test(new Date(_appleDates).toString()));
    }catch(e){return false;};
    };

那么按照你说的去使用即可。
rules:{
       eventdate: 
       {
       required:true,   
       date: true
       }
     }

感谢您,祝您快乐!

@7-isnotbad 很高兴能帮助你。 - Nifty

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接