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

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

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

約束API

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

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

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

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

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

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

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

翻譯自定義表單驗(yàn)證消息

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

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

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

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

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

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

// 翻譯對(duì)象
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
  // 拆分以獲取第一部分，瀏覽器通常為 en-US
  const browserLang = navigator.language.split('-')[0];
  return supportedLangs.includes(browserLang) ? browserLang :'en';
};

// 翻譯后的錯(cuò)誤消息
const errorMsgs = translations[getUserLang()];
// 表單元素
const form = document.getElementById("myForm");
// 按鈕元素
const btn = document.getElementById("btn");
// 名稱輸入
const fullNameInput = document.getElementById("fullName");
// 錯(cuò)誤消息的包裝器
const errorSpan = document.getElementById("error-span");

// 單擊按鈕時(shí)……
btn.addEventListener("click", function (event) {
  // 如果名稱輸入不存在……
  if (!fullNameInput.value) {
    // ……拋出錯(cuò)誤
    fullNameInput.setCustomValidity(errorMsgs.required);
    // 為樣式設(shè)置輸入的 .error 類
    fullNameInput.classList.add("error");
  }
});

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

方法二：在本地存儲(chǔ)中設(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)建一個(gè)腳本，該腳本檢查localStorage並使用保存的偏好來返回翻譯後的自定義驗(yàn)證消息：

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

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

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

總結(jié)

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

參考

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

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