对于非浏览器区域设置日期格式，L18N 日期的客户端验证始终失败答案

【问题标题】：Client side validation of L18N dates always fails for non-browser locale date formats对于非浏览器区域设置日期格式，L18N 日期的客户端验证始终失败
【发布时间】：2014-05-27 01:40:51
【问题描述】：

我有一个使用客户端验证的 asp.net mvc 表单中的日期字段。我希望它根据当前选择的网站文化接受日期，但它总是失败，除了浏览器区域设置。

我不明白这里发生了什么。如果我专门将页面设置为使用一组 l18n 文件，那么为什么要根据浏览器区域设置来测试验证？如何允许用户覆盖浏览器区域设置并根据他们的站点语言偏好验证输入？

我有以下html：

<!DOCTYPE html>
<html lang="en-GB">

...

<div class="may-frm-edgrp">
        <label class="mfrm-lbl-r" for="TradingSince">Trading Since</label>
        <div class="may-frm-input-block">
            <input value="" class="dateTimePickerInput, mfrm-input mfrm-input-190 input-validation-error" data-date-format="{0:dd/MM/yyyy}" data-val="true" data-val-date="The field Trading Since must be a date." data-val-required="Trading since date is required" id="TradingSince" name="TradingSince" placeholder="dd/mm/yyyy" size="18" type="text">
        </div>
    </div>

文档底部正在生成以下脚本：

    <script src="/content/js/jquery.validate.min.js"></script>
<script src="/content/js/jquery.validate.unobtrusive.min.js"></script>
<script src="/content/globalization/globalize-master/lib/globalize.js"></script>
<script src="/content/js/jquery.validate.globalize.js"></script>
<script src="/content/globalization/date-picker/datepicker-en-GB.js"></script>
<script src="/content/globalization/globalize-master/lib/cultures/globalize.culture.en-GB.js"></script>

但无济于事。我如何设置它以便根据 en-GB 覆盖正确验证？

【问题讨论】：

标签： jquery asp.net-mvc validation

【解决方案1】：

好的，所以实现这项工作的方法是覆盖 jquery.validate.globalize.js 中的覆盖，这通过组合插件来增强表单验证

jquery.validate.min.js 和
globalize.js.

所以 jquery.validate.min.js 将它的魔力存储在各种 css 属性中。微软随后提供

jquery.validate.unobtrusive.min.js

使用相同的基本 jquery.validate.min.js 插件，但覆盖 css 作为存储机制，而是选择数据属性。所以

jquery.validate.unobtrusive.min.js

本质上是

的适配器

jquery.validate.min.js

使用数据属性。然而，由此产生的验证将使用用户浏览器的文化，在这不足的地方默认为基于美国的文化，这对于非美国用户来说几乎无处不在，尤其是在货币和日期方面。

所以我们可以使用全球化我们的应用程序

globalize.js

根据特定的语言环境进行解析和格式化。我们可以通过数百个可用区域中的任何一个注入这些语言环境

globalize.culture.*.js

其中 * 可能是 en-GB、ro-RO 等。

这些文件将使基础 globalize.js 插件适应几乎任何文化。要将 globalize.js 插件连接到验证插件，我们可以覆盖 jquery.validate.min.js 中的验证方法：

    date: function( value, element ) {
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
    },

到：

$.validator.methods.date = function (value, element) {
    var val = Globalize.parseDate(value);
    return this.optional(element) || (val instanceof Date);
};

根据这篇文章

http://icanmakethiswork.blogspot.co.nz/2012/09/globalize-and-jquery-validate.html

这仍将仅默认使用浏览器 UI 文化进行验证，但至少现在可以根据用户浏览器区域设置在客户端上正确验证表单。

在我的情况下，我还需要覆盖此默认设置，因为我们允许用户选择语言等以使用当前站点。因此，网站语言现在需要优先于浏览器语言。

所以在我的情况下，即使我提供了

globalize.culture.en-GB.js

我的表单正在根据 en-US 进行验证，因为那是浏览器 UI 文化。

如果我将浏览器 UI 文化更改为罗马尼亚语并提供

globalize.culture.ro-RO.js

那么该站点将正确地以罗马尼亚语而不是美国语进行客户端验证，但是如果罗马尼亚的用户想要以英语阅读该站点怎么办？

为此，我们需要允许用户在网站上选择他们当前的文化。因此，我们使用标志下拉菜单进行选择并将文化存储在 cookie 中。然后根据请求将文化注入到 html 标签中：

<html lang="en-GB">

然后在 document.OnReady{} 中设置：

 $(document).ready(function () {
            Globalize.cultureSelector = $('html').attr('lang');

这将覆盖 globalize.js 中的 Globalize.cultureSelector。

然后我们需要将这个值解析到来自

的验证器方法中

jquery.validate.globalize.js

查找该值并将其提供给 Globalize.parse：

$.validator.methods.date = function (value, element) {
    var val = Globalize.parseDate(value, null, Globalize.cultureSelector);
    return this.optional(element) || (val instanceof Date);
};

然后，Globalize 将使用请求的文化而不是默认的浏览器文化来解析和格式化值，然后将这些值传递到 jquery.validate.min.js 以进行实际验证。

如果我们更新了 Globalize.cultureSelector，为什么还需要传入这个值？因为如果我们不这样做，Globalize.parse 方法将只使用默认/基本文化，无论如何，它始终是浏览器的文化

globalize.culture.*.js

我们已经通过了。或者，如果您不想在每个页面上都这样做，只需修改验证器方法以直接从 html 标记中读取。

$.validator.methods.date = function (value, element) {
    var val = Globalize.parseDate(value, null, $('html').attr('lang'));
    return this.optional(element) || (val instanceof Date);
};

【讨论】：