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

Question

目前我正在使用

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

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

有没有办法添加类似的东西

data-parsley-`constraint`-message-fr="Francais francais francais"

还是通过 JS 来实现？

具体来说，我使用的是 data-parsley-required-message=""

Answer 1

为什么不使用 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>

使用任一选项，您都无需将 data-parsley-constraint-message 添加到每个输入。当您需要更改消息时，您可以在本地化文件中执行此操作。

最后，如果您需要自定义验证器，可以查看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 data-parsley-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 文件，否则您将收到类似 @987654338 的错误@):

window.ParsleyValidator.setLocale('pt');
$("#myForm").parsley();

这是一个jsfiddle 用于演示。如果您想测试，只需setLocale('en') 并查看英文消息。

Answer 2

您只需将 -message 放在您用于验证的 parsley 属性之后。

例如，

  <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 是我的 parsley 验证器，然后用于显示该 equalto 的客户消息，然后我简单地放 -message。 data-parsley-equalto >> data-parsley-equalto-message