Chrome中不显眼的validation不会以dd / mm / yyyy进行validation

我试图在不同的浏览器中使用dateselect器的最简单的情况。 我怀疑我做了一件非常简单的事情,但经过大量的search,我还没有find解决办法。 下面是一些代表我正在尝试的示例代码。

如果我使用Chrome(v12.0.742.122)并从13/08/2011挑选一个date,jQueryvalidation逻辑将不会允许页面提交,即使我明确指定格式为“dd / mm / YY”。

如果我将格式更改为“dd / M / yy”,并select一个像2011年8月13日那样的date,它可以在Chrome中运行,但不会在IE中提交给我(v8.0.7600.16385)。 在FireFox(v3.6.18)中,这两种格式都可以工作。

我需要什么validation脚本才能在Chrome中支持“dd / mm / yy”date格式?

<html> <head> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="jquery.validate.unobtrusive.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.date').datepicker({ dateFormat: 'dd/mm/yy' }); $.validator.addMethod("dateRule", function(value, element) { return true; }, "Error message"); }); </script> </head> <body> <form> Date: <input type="text" name="myDate" class="date dateRule" /> <input type="submit" /> </form> </body> </html> 

11 Solutions collect form web for “Chrome中不显眼的validation不会以dd / mm / yyyy进行validation”

四个小时后,我终于偶然发现了答案 。 出于某种原因,Chrome浏览器似乎有一些内置的偏好,使用美国的date格式,其中IE和FireFox是明智的,并在操作系统上使用区域设置。

 jQuery.validator.methods["date"] = function (value, element) { return true; } 

你可以使用这里提供的Globalize.js插件: https : //github.com/jquery/globalize

然后简单地重新定义你的网站的主脚本文件中的validation方法就像这样(避免编辑jquery.validate.js库文件,以后可能需要更新它):

 $.validator.methods.date = function (value, element) { return this.optional(element) || Globalize.parseDate(value, "d/M/y", "en"); } 

我知道我晚了一点,但这里是我用来validationChrome的解决scheme,不接受英国格式的date。 一个简单的即插即用validation,它不依赖任何插件或修改任何文件。 它将接受在1/1/1900和31/31/2999之间的任何date,所以美国或英国的格式。 显然有无效的date,将潜行过去,但你可以调整正则expression式到你的心的内容。 这满足了我的需求,因为它将用于站点的低stream量区域,并进行服务器端validation。 有问题的网站的区域是用ASP.net MVC构build的。

 jQuery.validator.methods.date = function(value, element) { var dateRegex = /^(0?[1-9]\/|[12]\d\/|3[01]\/){2}(19|20)\d\d$/; return this.optional(element) || dateRegex.test(value); }; 

看起来像JQuery团队已经提出这个问题。

https://github.com/jzaefferer/jquery-validation/issues/153

看起来现在的解决方法是在additional-methods.js中使用dateITA

它看起来像这样:

 jQuery.validator.addMethod( "dateITA", function(value, element) { var check = false; var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/; if( re.test(value)){ var adata = value.split('/'); var gg = parseInt(adata[0],10); var mm = parseInt(adata[1],10); var aaaa = parseInt(adata[2],10); var xdata = new Date(aaaa,mm-1,gg); if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) ) check = true; else check = false; } else check = false; return this.optional(element) || check; }, "Please enter a correct date" ); 

如果你添加了validation器,你可以将你的datepicker附加到“.dateITA”类。

到目前为止,这对我来说能够帮助我超越Chrome这个愚蠢的问题。

这仍然是.net mvc4中的一个问题,尽pipe在jQueryvalidation插件中明确的文档不使用它, EditorFor DateTime仍然会生成data-val-date属性! 希望微软修复这个和data-val-date是再也听不到了!

在此期间,您可以通过modernizr使用build议的库:

 yepnope({ test: isNaN(Date.parse("23/2/2012")), nope: 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js', complete: function () { $.validator.methods.date = $.validator.methods.dateITA } }); 

或者如果不想使用yepnope / modernizr,并且去掉dateITA方法的UTC组件(如果使用这个库来input当地时间,date不会总是在月份的第一天或最后一天进行validation,除非在格林威治线 – 即UTC +0):

 (function ($) { var invokeTestDate = function () { return $.validator.methods.date.call({ optional: function () { return false; }, (new Date(2012,8,23)).toLocaleDateString(), null); }; if (invokeTestDate()) { return; } // http://docs.jquery.com/Plugins/Validation/Methods/date $.validator.methods.date = function (value, element) { //ES - Chrome does not use the locale when new Date objects instantiated: //return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } })(jQuery); 

我们使用以下工作来开展我们的项目。

 if ($.validator) { $.validator.addMethod("date", function (value, element, params) { if (this.optional(element)) { return true; } var ok = true; try { $.datepicker.parseDate("dd/mm/yy", value); } catch (err) { ok = false; } return ok; }); } 

这个代码可以帮助你。

 $.validator.addMethod( "date", function(value, element) { var check = false; var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/; var reBR = /^\d{4}\-\d{1,2}\-\d{1,2}$/; if( re.test(value)){ var adata = value.split('/'); var gg = parseInt(adata[0],10); var mm = parseInt(adata[1],10); var aaaa = parseInt(adata[2],10); var xdata = new Date(aaaa,mm-1,gg); if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) ) check = true; else check = false; } else if( reBR.test(value)){ var adata = value.split('-'); var aaaa = parseInt(adata[0],10); var mm = parseInt(adata[1],10); var gg = parseInt(adata[2],10); var xdata = new Date(aaaa,mm-1,gg); if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) ) check = true; else check = false; } else check = false; console.log(check); return this.optional(element) || check; }, "Por favor insira uma data válida" ); 

应该改变你在validation中定义的dateRule方法(正则expression式只是一个简单的例子):

 $.validator.addMethod( "dateRule", function(value, element) { return value.match(/^\d\d?\/\d\d?\/\d\d$/); }, "Please enter a date in the format dd/mm/yy" ); 

你可以切换任何你想要的正则expression式。 我从这里得到这个支持M / D / YY或M / D / YYYY或MM / DD / YYYY或MM / DD / YY的date的正则expression式:1/1/1920到12/31/2019; 2月29日和30日总是允许的

 ^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$ 

我也find了一个似乎适用于任何文化的解决scheme。

http://devdens.blogspot.com/2011/11/jquery-validation-fix-for-date-format_29.html

它需要你修改实际的jquery.valdiation.min.js文件,但到目前为止它为我工作。

这是唯一适用于我的解决scheme: http : //www.codeproject.com/Tips/579279/Fixing-jQuery-non-US-Date-Validation-for-Chrome

  jQuery.extend(jQuery.validator.methods, { date: function (value, element) { var isChrome = window.chrome; // make correction for chrome if (isChrome) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } // leave default behavior else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } } }); 

在调用你的validation文件后,我发现这个错误的最简单的修正是下面的代码片段;

  jQuery.validator.methods["date"] = function (value, element){ var shortDateFormat = "dd/mm/yy"; var res = true; try { $.datepicker.parseDate(shortDateFormat, value); } catch (error) { res = false; } return res; } 

即使在2016年发现的版本,仍然有这个问题没有在Chrome上面的代码,而不是Firefox。

这是我的首选解决scheme,因为它不需要任何额外的库或插件的工作。

我发现这个代码片段,而谷歌search这个问题。