对 en-GB 日期进行不显眼的验证

Posted

技术标签:

【中文标题】对 en-GB 日期进行不显眼的验证【英文标题】:Unobtrusive Validation on en-GB Dates 【发布时间】:2013-02-15 07:48:36 【问题描述】:

我正在使用 asp.net MVC4 设计一个数据输入表单,它具有日期类型的输入。

在 chrome 和 jQueryUI datepicker 中使用不显眼的 jQuery 库我仍然收到错误(字段 news_date 必须是日期。),在选择正确的日期格式后,使用 datepicker(即 14/02/2013)并提交表格。

一些searching 建议我应该使用jQuery.globilization 库。所以在阅读了documentation之后,我添加了对以下脚本的引用。

$(document).ready(function () 
    $.culture = Globalize.culture("en-GB");
    $.validator.methods.date = function (value, element) 
        return this.optional(element) || Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
    
);

但我仍然收到错误

如果我在 chrome 中调试上面的代码,我可以看到 "value) 的值是 "2014-02-14"。

下面是渲染的 html

<div class="editor-field">

<input class="text-box single-line datepicker hasDatepicker input-validation-error" data-val="true" data-val-date="The field news_date must be a date." id="news_date" name="news_date" type="date" value="">
<script type="text/javascript">
    $(function () 
        $(".datepicker").datepicker( dateFormat: "dd/MM/yyyy" );
    );
    </script>
            <span class="field-validation-error" data-valmsg-for="news_date" data-valmsg-replace="true"><span for="news_date" class="" style="">The field news_date must be a date.</span></span>
        </div>

更新:顺便说一下,如果我将验证器方法更改为硬编码。 即

$.validator.methods.date = function (value, element) 
    return this.optional(element) || Globalize.parseDate("14/03/2014", "dd/MM/yyyy", "en-GB")

它有效。因此,它肯定是日期在 POST 或提交验证之前存储在页面上的格式,这是问题所在。

更新 如果我在 chrome 控制台中运行 $('#news_date').val() 选择日期后,我会得到“2014-02-14”,我可以调试我的脚本并查看传递给验证器方法的值,它是这个值,因此它不匹配英国日期格式因此返回一个空值,而不是一个可以通过验证的值。那么日期选择器在选择后如何存储日期是我的问题吗?

有没有人在 Chrome 中找到解决方法?

【问题讨论】:

【参考方案1】:

此解决方法似乎可以处理 chrome 和 ie 等。在 chrome 中,我无法输入不正确的日期,因此日期选择器会给我一个有效日期,当它将它传递给验证器函数时,它将位于 yyyy-mm- dd 格式。即让我直接输入输入或使用选择器,输入无效日期,即 2/30/2013(在 en-GB 文化中无效)它正确地使其无效并阻止进一步的进展。如果没有更好的建议,我认为这是最好的可行答案

$(document).ready(function () 
$.culture = Globalize.culture("en-GB");
$.validator.methods.date = function (value, element) 
    //This is not ideal but Chrome passes dates through in ISO1901 format regardless of locale 
    //and despite displaying in the specified format.

    return this.optional(element)
        || Globalize.parseDate(value, "dd/mm/yyyy", "en-GB")
        || Globalize.parseDate(value, "yyyy-mm-dd");
);

【讨论】:

谢谢你,我整天都在用头撞墙,这很有魅力。顺便说一句,我无法让它与最新版本的 Globalize.js (v1.1.0) 一起使用,因为它已经全部更改为 CLDR。不过在旧版本 v0.1.1 上也能正常工作。【参考方案2】:

我可以建议你另一种解决方法吗,把它放在你的 web.config 中以避免不同的文化设置问题。

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-GB" uiCulture="en-GB"/>

在 Jquery datepicker 中这就足够了,

 $(function () 
        $(".datepicker").datepicker( dateFormat: "dd/MM/yyyy" );
 );

【讨论】:

我已经有了这个,除了两个编码属性。改变了这个,我还是一样。日期选择器允许我选择一个日期,它在显示中看起来是 GB 格式,但是当它通过验证器时,它会以 yyyy-MM-dd 格式传递。 你可以尝试用 [HttpPost] 属性装饰你的控制器吗? 我们遇到了这样的问题 - weblogs.asp.net/melvynharbour/archive/2008/11/21/… ssilas777 不确定该建议是否会有所帮助,因为这都是客户端验证,此时它甚至没有通过 GET 或 POST。我使用 Fiddler 进行了验证。 你试过了吗,不显眼的后台应该有ajax?【参考方案3】:
$(function () 
        $(".datepicker").datepicker( dateFormat: 'dd/mm/yy' );
 );

【讨论】:

以上是关于对 en-GB 日期进行不显眼的验证的主要内容,如果未能解决你的问题,请参考以下文章

不显眼的验证/jQuery 客户端验证输入的日期是不是超过当前日期

自定义格式日期的 MVC3 不显眼日期验证

在 HTTP GET 中绑定 en-GB 日期

对日期对象进行 React 道具验证

用java语言创建一个日期类,使得该类能够对日期的合法性进行验证。

50个Android开发技巧(09 避免用EditText对日期进行验证)