为HTML表单创建自定义翻译消息的两种方法

HTML表单内置了验证表单输入和其他控件的方法，这些方法基于预定义规则，例如：设置输入为必填项、设置范围滑块的最小值和最大值约束，或为电子邮件输入设置模式以检查格式是否正确。原生HTML和浏览器为我们提供了许多“免费”功能，无需复杂的脚本即可验证表单提交。

如果某些内容未正确验证？我们会得到“免费”的错误消息来显示给使用表单的人。

这些通常足以完成工作，但如果我们需要更具体的错误内容，我们可能需要覆盖这些消息——尤其是在我们需要跨浏览器处理翻译内容的情况下。以下是它的工作原理。

约束API

约束API用于覆盖默认的HTML表单验证消息，并允许我们定义自己的错误消息。Chris Ferdinandi甚至在CSS-Tricks上对此进行了详细介绍。

简而言之，约束API旨在提供对输入元素的控制。API可以在单个输入元素或直接从表单元素调用。

例如，假设我们正在使用这个简单的表单输入：

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

我们可以通过获取fullNameInput元素并在其上调用setCustomValidity()方法，然后向其传递自定义消息来设置我们自己的错误消息：

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

单击提交按钮时，指定的邮件将显示在默认邮件的位置。

翻译自定义表单验证消息

自定义错误消息的一个主要用例是更好地处理国际化。我们可以通过两种主要方法来实现这一点。还有其他方法可以实现这一点，但我在这里介绍的是我认为最直接的方法。

方法一：利用浏览器的语言设置

第一种方法是使用浏览器语言设置。我们可以从浏览器获取语言设置，然后检查我们是否支持该语言。如果我们支持该语言，则可以返回翻译后的消息。如果我们不支持该特定语言，则提供备用响应。

继续使用之前的HTML，我们将创建一个翻译对象来保存您首选的语言（在脚本标签内）。在这种情况下，该对象支持英语、斯瓦希里语和阿拉伯语。

const translations = {
  en: {
    required: "Please fill this",
    email: "Please enter a valid email address",

  },
  sw: {
    required: "Sehemu hii inahitajika",
    email: "Tafadhali ingiza anwani sahihi ya barua pepe",
  },
  ar: {
    required: "هذه الخانة مطلوبه",
    email: "يرجى إدخال عنوان بريد إلكتروني صالح",
  }
};

接下来，我们需要提取对象的标签并将它们与浏览器的语言进行匹配。

// 翻译对象
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
  // 拆分以获取第一部分，浏览器通常为 en-US
  const browserLang = navigator.language.split('-')[0];
  return supportedLangs.includes(browserLang) ? browserLang :'en';
};

// 翻译后的错误消息
const errorMsgs = translations[getUserLang()];
// 表单元素
const form = document.getElementById("myForm");
// 按钮元素
const btn = document.getElementById("btn");
// 名称输入
const fullNameInput = document.getElementById("fullName");
// 错误消息的包装器
const errorSpan = document.getElementById("error-span");

// 单击按钮时……
btn.addEventListener("click", function (event) {
  // 如果名称输入不存在……
  if (!fullNameInput.value) {
    // ……抛出错误
    fullNameInput.setCustomValidity(errorMsgs.required);
    // 为样式设置输入的 .error 类
    fullNameInput.classList.add("error");
  }
});

这里的getUserLang()函数进行比较并返回支持的浏览器语言或英语的备用语言。运行示例，当单击按钮时，应显示自定义错误消息。

方法二：在本地存储中设置首选语言

第二种方法是使用在localStorage中用户定义的语言设置。换句话说，我们要求用户首先从包含可选<option></option>标签的<select></select>元素中选择他们的首选语言。一旦做出选择，我们将他们的偏好保存到localStorage，以便我们可以引用它。

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

有了<select></select>元素，我们可以创建一个脚本，该脚本检查localStorage并使用保存的偏好来返回翻译后的自定义验证消息：

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

该脚本将初始值设置为当前选定的选项，将该值保存到localStorage，然后根据需要从localStorage中检索它。同时，该脚本在<select></select>元素触发的每个更改事件中更新选定的选项，同时保持原始回退以确保良好的用户体验。

如果我们打开DevTools，当选择语言偏好时，我们将看到用户的首选值在localStorage中可用。

总结

就是这样！我希望这个快速的小技巧能有所帮助。我知道我以前在弄清楚如何使用约束API时希望拥有它。这是网络上那些你知道可能的事情之一，但确切的方法很难找到。

参考

• 表单验证系列（Chris Ferdinandi）
• 了解伪类选择器（Chris Coyier）
• 约束验证（MDN）
• 客户端表单验证（MDN）

以上是为HTML表单创建自定义翻译消息的两种方法的详细内容。更多信息请关注PHP中文网其他相关文章！