JQuery 验证国际化问题答案

【问题标题】：JQuery Validation Internationalization ProblemJQuery 验证国际化问题
【发布时间】：2011-08-17 10:19:28
【问题描述】：

如何更改以浏览器语言显示错误消息的 JQuery 验证插件。我的意思是，如果我在有英语语言错误的浏览器上运行它，它将是英语，或者如果浏览器的语言是土耳其语，错误消息也将是土耳其语（当然我会以那种语言定义消息，如果我也应该定义默认语言，如果我没有根据浏览器的语言定义错误信息列表）

【问题讨论】：

标签： jquery internationalization jquery-validate

【解决方案1】：

你可以看看 jquery 的本地化插件：http://keith-wood.name/localisation.html
它允许根据浏览器定义的语言加载 javascript 文件。

jquery 验证插件附带本地化文件，地址为：http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_##.js，其中 ## 是本地代码。

您可以做的是加载带有默认错误消息的验证插件，然后使用本地化插件加载特定于语言的错误消息。您甚至可以编写本地化的 js 文件，语法非常简单：

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: FR
 */
 jQuery.extend(jQuery.validator.messages, {
    required: "Ce champ est requis.",
    remote: "Veuillez remplir ce champ pour continuer.",
    email: "Veuillez entrer une adresse email valide.",
    url: "Veuillez entrer une URL valide.",
    date: "Veuillez entrer une date valide.",
    dateISO: "Veuillez entrer une date valide (ISO).",
    number: "Veuillez entrer un nombre valide.",
    digits: "Veuillez entrer (seulement) une valeur numérique.",
    creditcard: "Veuillez entrer un numéro de carte de crédit valide.",
    equalTo: "Veuillez entrer une nouvelle fois la même valeur.",
    accept: "Veuillez entrer une valeur avec une extension valide.",
    maxlength: jQuery.validator.format("Veuillez ne pas entrer plus de {0} caractères."),
    minlength: jQuery.validator.format("Veuillez entrer au moins {0} caractères."),
    rangelength: jQuery.validator.format("Veuillez entrer entre {0} et {1} caractères."),
    range: jQuery.validator.format("Veuillez entrer une valeur entre {0} et {1}."),
    max: jQuery.validator.format("Veuillez entrer une valeur inférieure ou égale à  {0}."),
    min: jQuery.validator.format("Veuillez entrer une valeur supérieure ou égale à  {0}.")
});

希望这会有所帮助！

【讨论】：

【解决方案2】：

Jquery 验证插件使用数组变量。我定义了不同的数组变量，如下所示：

locale_tr, locale_en, locale_sw etc.

我把浏览器的语言理解为两个字符

tr en sw

我称变量为：

locale_ + browser's two character language

所以它对我有用。

【讨论】：

【解决方案3】：

以下是设置自定义验证消息的简单方法的建议：

1. 创建一个名称为 XX_Messages.ee.js 的 js 文件，语法：

 LANG = {

    PERSONAL_BIRTHDAY_CAN_T_BLANK : 'Birthday cannot be left blank',
    PERSONAL_COUNTRY_CAN_T_BLANK : 'Country cannot be left blank',
    PERSONAL_CITY_CAN_T_BLANK : 'City cannot be left blank',
.......
TEAM_EMAIL_NOT_VALID : 'E-mail is not a valid email address'
};

<head>
....
<g:set var="locale" value="${session['language']}"/>
    <g:if test="${locale.equals("ee")}">
        <script src="${resource(dir: 'js',file:'/XX_Messages.ee.js')}"></script>
    </g:if>
....
</head>

注意：将您的 XX_Messages.ee.js 导入您要验证的 html 头中

messages: {
            gender: {
                required: LANG.PERSONAL_BIRTHDAY_CAN_T_BLANK
            },
            firstName: {
                required:  LANG.PERSONAL_CITY_CAN_T_BLANK
            },
            lastName: {
                required: LANG.PERSONAL_COUNTRY_CAN_T_BLANK
            }
        }

注意： XX_Messages.ee.js 文件必须在验证 js 之前导入到 html 的头部。

【讨论】：