HTML表單內(nèi)置了驗證表單輸入和其他控件的方法，這些方法基于預(yù)定義規(guī)則，例如：設(shè)置輸入為必填項、設(shè)置范圍滑塊的最小值和最大值約束，或為電子郵件輸入設(shè)置模式以檢查格式是否正確。原生HTML和瀏覽器為我們提供了許多“免費”功能，無需復(fù)雜的腳本即可驗證表單提交。

如果某些內(nèi)容未正確驗證？我們會得到“免費”的錯誤消息來顯示給使用表單的人。

這些通常足以完成工作，但如果我們需要更具體的錯誤內(nèi)容，我們可能需要覆蓋這些消息——尤其是在我們需要跨瀏覽器處理翻譯內(nèi)容的情況下。以下是它的工作原理。

約束API

約束API用于覆蓋默認(rèn)的HTML表單驗證消息，并允許我們定義自己的錯誤消息。Chris Ferdinandi甚至在CSS-Tricks上對此進行了詳細(xì)介紹。

簡而言之，約束API旨在提供對輸入元素的控制。API可以在單個輸入元素或直接從表單元素調(diào)用。

例如，假設(shè)我們正在使用這個簡單的表單輸入：

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

我們可以通過獲取fullNameInput元素并在其上調(diào)用setCustomValidity()方法，然后向其傳遞自定義消息來設(shè)置我們自己的錯誤消息：

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

單擊提交按鈕時，指定的郵件將顯示在默認(rèn)郵件的位置。

翻譯自定義表單驗證消息

自定義錯誤消息的一個主要用例是更好地處理國際化。我們可以通過兩種主要方法來實現(xiàn)這一點。還有其他方法可以實現(xiàn)這一點，但我在這里介紹的是我認(rèn)為最直接的方法。

方法一：利用瀏覽器的語言設(shè)置

第一種方法是使用瀏覽器語言設(shè)置。我們可以從瀏覽器獲取語言設(shè)置，然后檢查我們是否支持該語言。如果我們支持該語言，則可以返回翻譯后的消息。如果我們不支持該特定語言，則提供備用響應(yīng)。

繼續(xù)使用之前的HTML，我們將創(chuàng)建一個翻譯對象來保存您首選的語言（在腳本標(biāo)簽內(nèi)）。在這種情況下，該對象支持英語、斯瓦希里語和阿拉伯語。

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: "???? ????? ????? ???? ???????? ????",
  }
};

接下來，我們需要提取對象的標(biāo)簽并將它們與瀏覽器的語言進行匹配。

// 翻譯對象
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);
    // 為樣式設(shè)置輸入的 .error 類
    fullNameInput.classList.add("error");
  }
});

這里的getUserLang()函數(shù)進行比較并返回支持的瀏覽器語言或英語的備用語言。運行示例，當(dāng)單擊按鈕時，應(yīng)顯示自定義錯誤消息。

方法二：在本地存儲中設(shè)置首選語言

第二種方法是使用在localStorage中用戶定義的語言設(shè)置。換句話說，我們要求用戶首先從包含可選<option></option>標(biāo)簽的<select></select>元素中選擇他們的首選語言。一旦做出選擇，我們將他們的偏好保存到localStorage，以便我們可以引用它。

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

有了<select></select>元素，我們可以創(chuàng)建一個腳本，該腳本檢查localStorage并使用保存的偏好來返回翻譯后的自定義驗證消息：

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

該腳本將初始值設(shè)置為當(dāng)前選定的選項，將該值保存到localStorage，然后根據(jù)需要從localStorage中檢索它。同時，該腳本在<select></select>元素觸發(fā)的每個更改事件中更新選定的選項，同時保持原始回退以確保良好的用戶體驗。

如果我們打開DevTools，當(dāng)選擇語言偏好時，我們將看到用戶的首選值在localStorage中可用。

總結(jié)

就是這樣！我希望這個快速的小技巧能有所幫助。我知道我以前在弄清楚如何使用約束API時希望擁有它。這是網(wǎng)絡(luò)上那些你知道可能的事情之一，但確切的方法很難找到。

參考

• 表單驗證系列（Chris Ferdinandi）
• 了解偽類選擇器（Chris Coyier）
• 約束驗證（MDN）
• 客戶端表單驗證（MDN）

以上是為HTML表單創(chuàng)建自定義翻譯消息的兩種方法的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！