Zwei Möglichkeiten, um benutzerdefinierte übersetzte Nachrichten für HTML -Formulare zu erstellen

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);
    // 为样式设置输入的 .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!