MVC 3 jQuery 验证/数字/十进制字段的全球化

Question

在 Web.config 文件中使用 globalculture="da-DK" 时，jQuery 验证不起作用。

在丹麦，当我们为 at 产品写价格时，我们使用符号 19,95 而不是美国的 19.95，这给我带来了一个我无法解决的问题。

我已经启动了 VS2010，新的 MVC 3 项目，添加了一个 homeController、一个 Product 类和一个简单的标准编辑视图，并且错误已经存在。

产品类别：

public class Product
{
    public string name { get; set; }
    public string itemNo { get; set; }
    public decimal price { get; set; }
}

HomeController：

public class homeController : Controller
{
    public ActionResult Index()
    {
        var product1 = new Product { name = "Testproduct", itemNo = "PRD-151541", price = 19 };
        return View(product1);
    }
}

索引视图：

@model WebUI.DomainModel.Product

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.itemNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.itemNo)
            @Html.ValidationMessageFor(model => model.itemNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

结果：

很遗憾，我无法在此处提交图片 - 请点击此链接查看结果： http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

所以 - 运行网站时，该字段将设置为 19,00 - 这是正确的文化定义 - 但在尝试保存时，验证失败。

请帮忙...

Answer 1

你可以试试微软的jQuery Globalization plugin：

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.glob.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globinfo/jquery.glob.da-dk.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN($.parseFloat(value));
    }

    $(function () {
        $.preferCulture('da-DK');
    });
</script>

---

插件已重命名和移动，您应该使用Globalize（2012 年 3 月）

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN(Globalize.parseFloat(value));
    }

    $(document).ready(function () {
        Globalize.culture('da-DK');
    });
</script>

更多信息请访问Scott Hanselman blog post

---

Answer 2

为当前版本的 https://github.com/jquery/globalize 更新了脚本，支持可选元素

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

$(function () {
    Globalize.culture('%%culture%%');
});

Answer 3

@shatl 从今天开始就有正确的答案。请注意范围属性，您需要如下所示的 hack。添加的完整代码如下所示：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="~/Scripts/globalize.js"></script>
    <script type="text/javascript" src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });

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

Answer 4

我最终听从了 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

Answer 5

仅供参考，对我有用的是：

记得设置正确的 jQuery 版本和正确的文化，在这个例子中是丹麦语。
如果值中没有句点，则取消注释。

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")"
    type="text/javascript"></script>
<script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            // if (value.indexOf(".") >= 0) {
            //     return false;
            // }
            return (Globalize.parseFloat(value));
        }

        $(document).ready(function () {
            Globalize.culture('da-DK');
        });

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

Answer 6

感谢这个页面，为我省去了很多麻烦，我不得不修复全球化代码。瑞典文化不接受点作为分隔符，但由于 parseFloat 使用底层的 javasacript 解析点将被接受为十进制分隔符，但服务器端这些将被拒绝。为了解决这个问题，我像这样覆盖 parseFloat

Globalize.orgParaseFloat = Globalize.parseFloat;
Globalize.parseFloat = function(value) {
    var culture = this.findClosestCulture();
    var seperatorFound = false;
    for (var i in culture.numberFormat) {
        if (culture.numberFormat[i] == ".") {
            seperatorFound = true;
        }
    }

    if (!seperatorFound) {
        value = value.replace(".", "NaN");
    }

    return this.orgParaseFloat(value);
};

我已经在他们的 Github 上开了一张票，所以可能会解决这个问题

Answer 7

经过一番研究……我找到了解决办法。

Web.config 在<system.web>添加

<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>

扩展 HtmlHelper 类

namespace System.Web.Mvc
{
    public static class LocalizationHelper
    {
        public static IHtmlString MetaAcceptLanguage(this HtmlHelper html)
        {
            var acceptLang = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString());
            return new HtmlString(string.Format("<meta name=\"accept-language\" content=\"{0}\"/>", acceptLang));
        }
    }
}

_Layout.cshtml 在<head>末尾添加

@Html.MetaAcceptLanguage();
<script type="text/javascript">
    $(document).ready(function () {
        var data = $("meta[name='accept-language']").attr("content");
        $.global.preferCulture(data);
    });
</script>

在这些更改之后，我可以使用我的 web gui 来处理十进制数字。

问候， 贾科莫

Answer 8

我来自阿根廷，很久以前我就在与这个问题作斗争，我们使用“，”作为小数分隔符，如果你写“逗号”javascript验证失败，但如果你输入“.”，模型将收到一个转换为整数的数字（55.60 将是 5560）

我用这个简单的解决方案解决了这个问题：

1st- 我升级了 jquery 验证库，使用的新 cdn 地址来自： http://jqueryvalidation.org/

我的 javascript 中包含的链接是这样的：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>

如果您希望它使用特定语言（在我的情况下为西班牙语），请也添加此行：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/localization/messages_es.js"></script>

用你想要的语言替换 ES。

2nd-如果要允许数字小键盘小数，必须替换“.”使用“，”才能正​​常工作，将此代码添加到您的页面以自动执行此操作：

$('#txtCurrency').keyup(function () {

    $('#txtCurrency').val($('#txtCurrency').val().replace(/\./g, ','));

});

---

Presto，问题解决了。

再见。

Answer 9

没有插件

我认为解决这个没有任何插件的最简单方法是覆盖默认验证，如下所示：

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {            
        var regex = /^(\d*)(\,\d{1,2})?$/; //99999,99
        return regex.test(value);
    }
</script>

如果您查看jquery.validate.js 的源代码，您会发现它只是像上面的代码一样测试一个正则表达式，并验证该元素是否是可选的：