使用ASP.NET MVC 3本地化jQuery验证

Question

我正在使用Asp.Net Mvc3和非侵入式的jQuery验证。我想本地化我的日期验证，也就是说，jQuery将我的日期验证为MM / dd / yyyy，但我希望它为dd / MM / yyyy。

我正在尝试使用jQuery Globalize插件（http://github.com/jquery/globalize）。 我添加了对脚本globalize.js和globalize.culture.pt-BR.js的引用，并在页面加载时运行以下脚本：

(function() {
  $(function() {
    $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
    Globalize.culture("pt-BR");
  });
}).call(this);

jQuery UI插件很好用，但验证不起作用。

编辑：

使用下面答案中的链接，我使用Globalize插件解决了这个问题:

当然，我还需要在页面中添加对Globalize插件的引用，以及引用我想要使用的语言环境（所有可用语言环境都在插件的网站上）。之后只需少量JavaScript代码即可。

Globalize.culture("pt-BR");
$.validator.methods.date = function(value, element) {
    return this.optional(element) || Globalize.parseDate(value);
};

- thitemple

---

如果您有时间，请在Brodie的回答中更新您提供的解决方案。将其放在这里而不是隐藏在评论中会非常有用 :) 谢谢！ - Francisco

刚刚完成了你要求的事情。 :) - thitemple

Answer 1

最近我也在做类似的事情。我一开始是按照Scott Hanselman在这个主题上的建议进行的 - 你可以在这里阅读相关内容：

http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx

我不得不做一些更改，以使用Globalize而不是jQuery Global（现在jQuery Global已经死了）。我在以下博客文章中写了这个过程，希望对你有所帮助：

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

我的博客文章中包含一个链接到jquery.validate.globalize.js脚本，它强制jQuery Validate使用Globalize进行数字/日期/范围解析。其中日期部分可能可以解决你的问题：

https://raw.github.com/gist/3651751/68cbccd0fdd4725a8d6fd1b5568bb33d27fb1eff/jquery.validate.globalize.js

/// <reference path="jquery-1.7.2.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="globalize.js" />

/*!
* Monkey patch for jquery.validate.js to make use of Globalize.js number and date parsing
*/

$(document).ready(function () {

    var currentCulture = $("meta[name='accept-language']").prop("content");

    // Set Globalize to the current culture driven by the meta tag (if any)
    if (currentCulture) {
        Globalize.culture(currentCulture);
    }

    //Tell the validator that we want numbers parsed using Globalize.js
    $.validator.methods.number = function (value, element) {    
        if (Globalize.parseFloat(value)) {
            return true;
        }
        return false;
    }

    //Tell the validator that we want dates parsed using Globalize.js
    $.validator.methods.date = function (value, element) {
        if (Globalize.parseDate(value)) {
            return true;
        }
        return false;
    }

    //Fix the range to use globalized methods
    jQuery.extend(jQuery.validator.methods, {
        range: function (value, element, param) {
            //Use the Globalization plugin to parse the value
            var val = Globalize.parseFloat(value);
            return this.optional(element) || (val >= param[0] && val <= param[1]);
        }
    });

});

- John Reilly

Answer 2

如果您正在进行国际化和ASP.NET MVC方面的工作，我强烈建议阅读Nadeem Afana撰写的这两篇优秀文章。在他的第二篇文章中，他提供了一个详细的示例，介绍了如何使用jQuery UI日期选择器，并讨论了本地化的问题。在他的示例中，他提到了以下内容。请参考下面两个链接：

• ASP.NET MVC 3国际化
• ASP.NET MVC 3国际化-第2部分（NerdDinner演示）

@* Unfortunately, the datepicker only supports Neutral cultures, so we need to adjust date and time format to the specific culture *@
    $("#EventDate").change(function(){
      $(this).val(Globalize.format($(this).datetimepicker('getDate'), Globalize.culture().calendar.patterns.d + " " + Globalize.culture().calendar.patterns.t)); /*d t*/
    });

我建议您下载他网站上链接的Nerd Dinner国际化演示。

- brodie

---

我面临的问题不是与日期选择器有关，而是与验证插件有关。即使我不使用日期选择器，验证插件也会显示我有一个无效项。 - thitemple

但无论如何，你提到的文章中有一些有价值的信息可以解决问题。我做了以下操作：$.validator.methods.date = function(value, element) { return this.optional(element) || Globalize.parseDate(value); } - thitemple

为了更清晰，我写了一个小帖子解释了我是如何解决这个问题的。http://bit.ly/ouK8hl - thitemple

Answer 3

对Johnny Reilly的回答进行小修正：

 $.validator.methods.number = function (value, element) {    
    if (Globalize.parseFloat(value)) {
        return true;
    }
    return false;
}

必须被替换为

$.validator.methods.number = function (value, element) {
    return !isNaN(Globalize.parseFloat(value));
}

为了正确解析零字符串("0")，代码应该是：

完整代码如下：

/// <reference path="jquery-1.7.2.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="globalize.js" />

/*!
* Monkey patch for jquery.validate.js to make use of Globalize.js number and date parsing
*/

$(document).ready(function () {

    var currentCulture = $("meta[name='accept-language']").prop("content");

    // Set Globalize to the current culture driven by the meta tag (if any)
    if (currentCulture) {
        Globalize.culture(currentCulture);
    }

    //Tell the validator that we want numbers parsed using Globalize.js
    $.validator.methods.number = function (value, element) {    
       return !isNaN(Globalize.parseFloat(value));
    }

    //Tell the validator that we want dates parsed using Globalize.js
    $.validator.methods.date = function (value, element) {
        if (Globalize.parseDate(value)) {
            return true;
        }
        return false;
    }

    //Fix the range to use globalized methods
    jQuery.extend(jQuery.validator.methods, {
        range: function (value, element, param) {
            //Use the Globalization plugin to parse the value
            var val = Globalize.parseFloat(value);
            return this.optional(element) || (val >= param[0] && val <= param[1]);
        }
    });

});

- Konstantin Ryazantsev