ParsleyJS - 使用data-parsley-`constraint`-message进行本地化

时间:2014-08-22 19:47:14

标签: javascript localization parsley.js

目前我正在使用

data-parsley-`constraint`-message="English sentence goes here"

但是现在我正在努力添加本地化这些消息永远不会使用i18n库进行翻译,因为它们是自定义的。

有没有办法添加像

这样的东西
data-parsley-`constraint`-message-fr="Francais francais francais"

或者通过JS来做某事?

特别是我使用data-parsley-required-message =""

2 个答案:

答案 0 :(得分:12)

为什么不使用Parsley的本地化而不是在输入上定义消息?

我建议您下载所需的本地化from the source。之后,according to the docs您可以在插件之前加载i18n,如下所示:

<script src="i18n/fr.js"></script>
<script src="i18n/it.js"></script>
<script src="parsley.min.js"></script>
<script type="text/javascript">
    window.ParsleyValidator.setLocale('fr');
</script>

或者您可以在插件之后加载i18n(在这种情况下,它将假设最后加载的本地化 - 在下面的示例中它将是意大利语),如下所示:

<script src="parsley.min.js"></script>
<script src="i18n/fr.js"></script>
<script src="i18n/it.js"></script>

在我的项目中,我通常会根据Cookie或Session变量加载所需的本地化:

<script src="parsley.min.js"></script>
<script src="i18n/"<?= echo $lang ?>".js"></script>

使用其中任何一个选项,您都不需要为每个输入添加数据 - 欧文 - constraint - 消息。当您需要更改消息时,您可以在本地化文件中执行此操作。

总而言之,如果您需要自定义验证程序,可以查看the docs以了解如何定义不同的本地化。


更新

这可以通过更改插件的源代码来解决OP的需求

您可以在 parsley.js 中编辑名为_getErrorMessage的方法(第1264行和2.0.4),如下所示:

_getErrorMessage: function (fieldInstance, constraint) {
    var customConstraintErrorMessage = constraint.name + 'Message';
    if ('undefined' !== typeof fieldInstance.options[customConstraintErrorMessage])
        return window.ParsleyValidator.formatMessage(fieldInstance.options[customConstraintErrorMessage], constraint.requirements);
    return window.ParsleyValidator.getErrorMessage(constraint);
},

对于这样的事情:

_getErrorMessage: function (fieldInstance, constraint) {
    //added
    var locale = window.ParsleyValidator.locale;
    var namespace = fieldInstance.options.namespace;
    var customConstraintErrorMessage = namespace  + constraint.name + '-' + locale;

    if (fieldInstance.$element.attr(customConstraintErrorMessage)) {
        // treat parameters
        if (fieldInstance.$element.attr(customConstraintErrorMessage).indexOf("%s") !== -1)
            return window.ParsleyValidator.formatMessage(fieldInstance.$element.attr(customConstraintErrorMessage), constraint.requirements);
        return fieldInstance.$element.attr(customConstraintErrorMessage);
    }

    // original
    var customConstraintErrorMessage = constraint.name + 'Message';
    if ('undefined' !== typeof fieldInstance.options[customConstraintErrorMessage])
        return window.ParsleyValidator.formatMessage(fieldInstance.options[customConstraintErrorMessage], constraint.requirements);
    return window.ParsleyValidator.getErrorMessage(constraint);
},

有了这个,您可以使用sintax 数据 - 欧芹 - constraint - locale 直接在输入中指定消息。这是一个示例:

<input type="text" name="name" value="" data-parsley-required="true"
    data-parsley-required-en="Name is required"
    data-parsley-required-pt="O nome é obrigatório" />
<input type="number" name="phone" value=""
    data-parsley-minlength="9"
    data-parsley-minlength-en="Phone length must be equal to %s"
    data-parsley-minlength-pt="O telefone deverá ter %s digitos" />

当您需要使用某种约束时(在上面的示例中,data-parsley-minlength是可变的)您可以使用消息中的%s。这将替换为正确的值。

在将parsley绑定到表单之前,您需要设置要使用的语言环境(注意:您需要包含相对于您正在使用的语言环境的javascript文件,否则您将收到类似{{{}的错误1}}):

Error: pt is not available in the catalog

这是一个用于演示的jsfiddle。如果您想测试,只需window.ParsleyValidator.setLocale('pt'); $("#myForm").parsley(); 并查看英文消息。

答案 1 :(得分:0)

您只能在用于验证的欧芹属性后放置-message。

例如,

  <input type="password" name="cpassword" id="cpassword" class="form-control"
                           placeholder="Enter confirm password" data-parsley-equalto="#password"
                           data-parsley-equalto-message="This value should be the same as password"
                           required>
  

data-parsley-equalto是我的欧芹验证器,然后在该消息的自定义消息显示之后,我在此之后简单地放置-message。   data-parsley-equalto >> data-parsley-equalto-message