使用 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 plugin 解决了这个问题：

当然，我必须在页面中添加对 Globalize 插件的引用以及对我想要使用的文化的引用（所有这些都可以在插件的网站上找到）。之后就是一小段 JavaScript 代码。

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

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]);
        }
    });

});

Answer 2

如果您正在从事国际化和 ASP.NET MVC 方面的工作，我强烈建议您阅读 Nadeem Afana 的这两篇优秀文章

• ASP.NET MVC 3 Internationalization
• ASP.NET MVC 3 Internationalization - Part 2 (NerdDinner Demo)

在他的第二篇文章中，他有一个使用 jQuery UI 日期选择器的详细示例，并讨论了本地化问题。

在他的例子中，他提到了以下内容

@* 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 国际化演示。

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]);
        }
    });

});