HTML-Formulare verfügen über integrierte Methoden, um die Formulareingabe und andere Steuerelemente auf der Grundlage vordefinierter Regeln wie Bedarf zu überprüfen, minimale und maximale Einschr?nkungen für Bereichsschieber zu setzen oder Modi für E-Mail-Eing?nge einzustellen, um zu überprüfen, ob das Format korrekt ist. Native HTML und Browser bieten uns viele "kostenlose" Funktionen, um die Formulare ohne komplexe Skripte zu überprüfen.

Wenn etwas nicht richtig verifiziert wird? Wir erhalten eine "kostenlose" Fehlermeldung, die der Person verwendet wird, die das Formular verwendet.

Diese reichen normalerweise aus, um den Job zu erledigen. Wenn wir jedoch spezifischere Fehlerinhalte ben?tigen, müssen wir diese Nachrichten m?glicherweise überschreiben - insbesondere wenn wir übersetzte Inhalte über Browser hinweg verarbeiten müssen. So funktioniert es.

Einschr?nkung api

Einschr?nkungs -API wird verwendet, um die Standard -HTML -Formular -Validierungsnachricht zu überschreiben und wir unsere eigene Fehlermeldung definieren k?nnen. Chris Ferdinandi gab dies sogar einen detaillierten Blick auf CSS-Tricks.

Kurz gesagt, die Einschr?nkungs -API soll die Kontrolle über Eingabelemente liefern. Die API kann in einem einzelnen Eingangselement oder direkt aus einem Formularelement aufgerufen werden.

Nehmen wir zum Beispiel an, wir verwenden diese einfache Formulareingabe:

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

Wir k?nnen unsere eigene Fehlermeldung festlegen, indem wir das Element

und die fullNameInput -Methode aufrufen und es dann eine benutzerdefinierte Nachricht übergeben: setCustomValidity()

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

Wenn Sie auf die Schaltfl?che Senden klicken, wird die angegebene Nachricht im Standardmeldungsort angezeigt.

übersetzung der benutzerdefinierten Formularverifizierungsnachricht

Einer der Hauptanwendungsfall für benutzerdefinierte Fehlermeldungen ist die bessere Verarbeitung der Internationalisierung. Wir k?nnen dies auf zwei Hauptarten tun. Es gibt andere M?glichkeiten, dies zu erreichen, aber ich werde hier die, die ich für die unkomplizierteste vorstellen kann.

Methode 1: Verwenden Sie die Spracheinstellungen des Browsers

Die erste Methode besteht darin, die Browserspracheinstellungen zu verwenden. Wir k?nnen die Spracheinstellungen aus dem Browser erhalten und dann prüfen, ob wir die Sprache unterstützen. Wenn wir die Sprache unterstützen, k?nnen wir die übersetzte Nachricht zurückgeben. Wenn wir diese bestimmte Sprache nicht unterstützen, wird eine alternative Antwort gegeben.

Verwenden Sie weiterhin die vorherige HTML -Nutzung ein übersetzungsobjekt, um Ihre bevorzugte Sprache (innerhalb des Skript -Tags) zu speichern. In diesem Fall unterstützt das Objekt Englisch, Swahili und Arabisch.

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

Als n?chstes müssen wir die Tags der Objekte extrahieren und an die Sprache des Browsers anpassen.

// 翻譯對象
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");
  }
});

Die hier

-Funktion vergleicht und gibt die unterstützte Browsersprache oder alternative Sprachen in Englisch zurück. Führen Sie das Beispiel aus. Wenn die Schaltfl?che angeklickt wird, sollte eine benutzerdefinierte Fehlermeldung angezeigt werden. getUserLang()

Methode 2: Stellen Sie die bevorzugte Sprache in lokalem Speicher

fest

Die zweite Methode besteht darin, benutzerdefinierte Spracheinstellungen in lokalstorage <option></option> zu verwenden. Mit anderen Worten, wir bitten die Benutzer, zuerst ihre bevorzugte Sprache aus den <select></select> -Elements auszuw?hlen, die das optionale

-Tag enthalten. Sobald die Auswahl getroffen wurde, sparen wir ihre Vorlieben für LocalStorage, damit wir sie verweisen k?nnen.

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

<select></select> Mit dem Element

k?nnen wir ein Skript erstellen, das LocalStorage überprüft und gespeicherte Einstellungen verwendet, um eine übersetzte benutzerdefinierte überprüfungsnachricht zurückzusetzen:

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

<select></select> Dieses Skript legt den Anfangswert für die aktuell ausgew?hlte Option fest, spart den Wert für LocalStorage und holt ihn nach Bedarf von LocalStorage ab. In der Zwischenzeit aktualisiert das Skript die ausgew?hlten Optionen in jedem ?nderungsereignis, das vom

Element ausgel?st wird, w?hrend der ursprüngliche Fallback beibeh?lt, um eine gute Benutzererfahrung zu gew?hrleisten.

Wenn wir Devtools bei der Auswahl der Spracheinstellungen einschalten, werden wir feststellen, dass der bevorzugte Wert des Benutzers in LocalStorage verfügbar ist.

Zusammenfassung

Das ist es! Ich hoffe, dieser schnelle kleine Trick hilft. Ich wei?, dass ich es vorher haben wollte, wenn ich herausfand, wie man die Einschr?nkungs -API benutzt. Dies ist eines dieser Dinge im Web, die Sie m?glich kennen, aber die genaue Methode ist schwer zu finden.

Referenz

Formprüfungsreihe (Chris Ferdinandi)
Verstehen Sie den Pseudo-Klasse-Selektor (Chris Coyier)
Einschr?nkungsprüfung (MDN)
Client Form Besturification (MDN)

Das obige ist der detaillierte Inhalt vonZwei M?glichkeiten, um benutzerdefinierte übersetzte Nachrichten für HTML -Formulare zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!