logo标签列表

翻译：翻译自定义的jQuery验证消息

jquerylocalizationjquery-validatetranslation
9

我有一个关于jQuery验证插件的问题。

我已经使用本地化来更改错误消息的默认语言为西班牙语，但我找不到任何关于翻译自定义消息的内容。有什么线索吗？

例如

我已经包含了西班牙语的翻译文件，这是我的代码：

$('.signup-form').validate({
    lang : 'es',
    rules:{
        tandc : {required : true}
    },
    messages:{
        tandc : {required : "You have to accept terms and conditions to proceed further"}
    }
})

默认消息，比如“此字段为必填项”等出现在西班牙语中，现在我想将上述消息翻译成西班牙语，但我找不到在哪里以及如何定义已翻译的文本。
4个回答
18

这个插件并不会自动进行翻译。翻译需要手动完成，然后将新的消息放入本地化文件中，这样它们就可以覆盖默认值。

此外，在该插件中没有叫做lang的.validate()选项。

要使用本地化文件，只需在包含该插件之后的某个位置包含该文件即可...

<script type="text/javascript" src="...path-to/jquery.validation/1.15.0/jquery.validate.js" />
<script type="text/javascript" src="...path-to/jquery-validation/localization/messages_es.js" />

然后所有默认消息都将以西班牙语显示。
默认消息，如“此字段为必填项”等，现在以西班牙语出现，我想将上述消息翻译成西班牙语，但我找不到在哪里和如何定义已翻译的文本。
包括西班牙语本地化文件只是告诉插件替换由西班牙语本地化文件定义的默认消息。
您的“messages”对象覆盖了这些默认消息，因此，如果您想要一个西班牙语消息来覆盖单个输入字段的“required”规则，则需要用西班牙语编写该消息。没有内置的动态翻译可以即时解释您的消息。
rules:{
    tandc : {
        required : true
    }
},
messages:{
    tandc : {
        required : "Tienes que aceptar los términos y condiciones de seguir avanzando"
    }
}

这是消息优先级的使用顺序：

  1. 通过规则或使用.validate()或类似方法中的messages对象为单个字段或整个字段声明的任何文本。

  2. 如果项目＃1中未定义任何内容：覆盖插件默认消息，如$.extend($.validator.messages，{...})所定义。 这就是本地化文件的工作方式。

  3. 如果项目＃2中未定义任何内容：由插件定义的默认消息（英语）。

现在，如果您需要在.validate()已经初始化了表单插件之后动态更改由messages对象定义的任何消息，则必须使用.rules('add')方法来覆盖它。请注意，保留HTML标签。
$('[name="foo"]').rules('add', {
    messages: {
        required: "yo! I'm required."
    }
});

演示：jsfiddle.net/3fLkf47u/

感谢您澄清“lang”的问题，我在某个地方看到它被使用并且一直在尝试。 无论如何，我想问如何在“messages_es”文件中定义翻译，现在我认为我已经得到了答案，我需要使用这个添加方法来覆盖西班牙语的消息。感谢您的明确解释！ - Rock Rathore
3
请查看 GitHub 上支持的所有语言和翻译键：https://github.com/jquery-validation/jquery-validation/tree/master/src/localization。 - Bruno Peres
5

于是我编写了一个简单的脚本，基于接受的答案来翻译验证信息。

function translateValidationMessages(currentLang) {
  message = {
    en: {
      required: "Required.",
      remote: "Please fix this field.",
      email: "Wrong email.",
      url: "Please enter a valid URL.",
      date: "Please enter a valid date.",
      dateISO: "Please enter a valid date (ISO).",
      number: "Please enter a valid number.",
      digits: "Please enter only digits.",
      creditcard: "Please enter a valid credit card number.",
      equalTo: "Please enter the same value again.",
      maxlength: $.validator.format("Please enter no more than {0} characters."),
      minlength: $.validator.format("Please enter at least {0} characters."),
      rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
      range: $.validator.format("Please enter a value between {0} and {1}."),
      max: $.validator.format("Please enter a value less than or equal to {0}."),
      min: $.validator.format("Please enter a value greater than or equal to {0}.")
    },
    et: {
      required: "See väli peab olema täidetud.",
      maxlength: $.validator.format("Palun sisestage vähem kui {0} tähemärki."),
      minlength: $.validator.format("Palun sisestage vähemalt {0} tähemärki."),
      rangelength: $.validator.format("Palun sisestage väärtus vahemikus {0} kuni {1} tähemärki."),
      email: "Palun sisestage korrektne e-maili aadress.",
      url: "Palun sisestage korrektne URL.",
      date: "Palun sisestage korrektne kuupäev.",
      dateISO: "Palun sisestage korrektne kuupäev (YYYY-MM-DD).",
      number: "Palun sisestage korrektne number.",
      digits: "Palun sisestage ainult numbreid.",
      equalTo: "Palun sisestage sama väärtus uuesti.",
      range: $.validator.format("Palun sisestage väärtus vahemikus {0} kuni {1}."),
      max: $.validator.format("Palun sisestage väärtus, mis on väiksem või võrdne arvuga {0}."),
      min: $.validator.format("Palun sisestage väärtus, mis on suurem või võrdne arvuga {0}."),
      creditcard: "Palun sisestage korrektne krediitkaardi number."
    }
  };
    console.log("Translating validation messages to: "+currentLang);

  if (currentLang == "et") {
    $.extend($.validator.messages, message.et);
  } else {
    $.extend($.validator.messages, message.en);
  }

例如，在语言下拉菜单更改时，可以调用此函数。

 $("#lang").change(function() {
        translateValidationMessages(this.value)
        console.log("Setting language to " + this.value);
      });

希望这能帮助到一些人

0
我的方法是为每种语言创建验证脚本文件。 

$.validator.addMethod("strong_password", function (value, element) {
  let password = value;
  if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[.@#$%&])(.{8,20}$)/
          .test(password))) {
    return false;
  }
  return true;
}, function (value, element) {
  let password = $(element).val();
  if (!(/^(.{8,20}$)/.test(password))) {
    return 'Password must be between 8 to 20 characters long.';
  } else if (!(/^(?=.*[A-Z])/.test(password))) {
    return 'Password must contain at least one uppercase.';
  } else if (!(/^(?=.*[a-z])/.test(password))) {
    return 'Password must contain at least one lowercase.';
  } else if (!(/^(?=.*[0-9])/.test(password))) {
    return 'Password must contain at least one digit.';
  } else if (!(/^(?=.*[.@#$%&])/.test(password))) {
    return "Password must contain special characters from @#$%&.";
  }
  return false;
});

$.validator.addMethod("strong_password", function (value, element) {
  let password = value;
  if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[.@#$%&])(.{8,20}$)/
          .test(password))) {
    return false;
  }
  return true;
}, function (value, element) {
  let password = $(element).val();
  if (!(/^(.{8,20}$)/.test(password))) {
    return 'Le mot de passe doit comporter entre 8 et 20 caractères.';
  } else if (!(/^(?=.*[A-Z])/.test(password))) {
    return 'Le mot de passe doit contenir au moins une majuscule.';
  } else if (!(/^(?=.*[a-z])/.test(password))) {
    return 'Le mot de passe doit contenir au moins une minuscule.';
  } else if (!(/^(?=.*[0-9])/.test(password))) {
    return 'Le mot de passe doit contenir au moins un chiffre.';
  } else if (!(/^(?=.*[.@#$%&])/.test(password))) {
    return  "Le mot de passe doit contenir des caractères spéciaux de @#$%&.";
  }
  return false;
});

然后在 HTML 中（我正在使用 Java EE，${lang} 是会话属性）。

    <script defer src="js/register-script_${lang}.js"></script>

0
你可以使用一个名为abValidate的jQuery库，它可以提供本地化的验证错误消息。 示例： 

$(document).ready(function () {
    $(".ab-form").abValidate({
        color: "#556b2f",
        backgroundColor: "white",
        debug: true
    });
});
<html>
   <head>
      <link rel="stylesheet" href="https://aslamanver.github.io/abvalidate/abValidate.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://aslamanver.github.io/abvalidate/abValidate.min.js"></script>
   </head>
   <body>
      <form class="ab-form" action="#">
         <div class="form-group">
            <input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more"
               name="name" class="ab-validation-i" />
            <div class="error"></div>
         </div>
         <br>
         <div class="form-group">
            <input type="submit" name="submit" value="Submit">
         </div>
      </form>
   </body>
</html>

一旦您使用abValidate库初始化了您的表单，您只需将所有内容都写在HTML中即可。

<input type="text" name="name" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" class="ab-validation-i" />

abValidate - Github链接：
https://github.com/aslamanver/abvalidate

Reference:
https://medium.com/@aslamanver/localized-custom-validation-messages-jquery-2892e021648f

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接