HTML表单内置了验证表单输入和其他控件的方法，这些方法基于预定义规则，例如：设置输入为必填项、设置范围滑块的最小值和最大值约束，或为电子邮件输入设置模式以检查格式是否正确。原生HTML和浏览器为我们提供了许多“免费”功能，无需复杂的脚本即可验证表单提交。
如果某些内容未正确验证？我们会得到“免费”的错误消息来显示给使用表单的人。
这些通常足以完成工作，但如果我们需要更具体的错误内容，我们可能需要覆盖这些消息——尤其是在我们需要跨浏览器处理翻译内容的情况下。以下是它的工作原理。
约束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时希望拥有它。这是网络上那些你知道可能的事情之一，但确切的方法很难找到。
以上是为HTML表单创建自定义翻译消息的两种方法的详细内容。更多信息请关注PHP中文网其他相关文章！
