為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中文網其他相關文章！