Arbeiten mit benutzerdefinierten HTML-Attributen in Thymeleaf
1. Überblick
In diesem Tutorial sehen wir uns an, wie wir mithilfe von Thymeleaf benutzerdefinierte Attribute in HTML5-Tags definieren können. Es ist ein Template-Engine-Framework, mit dem einfaches HTML zur Anzeige dynamischer Daten verwendet werden kann.
Einen einführenden Artikel über Thymeleaf oder seine Integration mit Spring finden Sie inlink.
2. Benutzerdefinierte Attribute in HTML5
Manchmal benötigen wir zusätzliche Informationen in HTML-Seiten, um eine Verarbeitung auf der Clientseite durchführen zu können. Beispielsweise möchten wir möglicherweise zusätzliche Daten informinput-Tags speichern, damit wir sie beim Senden des Formulars mit AJAX verwenden können.
Ebenso möchten wir einem Benutzer, der ein Formular ausfüllt, möglicherweise benutzerdefinierte Überprüfungsfehlermeldungen anzeigen.
In jedem Fallwe can supply this additional data by using HTML 5’s custom attributes. Custom attributes can be defined in an HTML tag using the data- prefix.
Lassen Sie uns nun sehen, wie wir diese Attribute mit dem Standarddialekt in Thymeleaf definieren können.
3. Benutzerdefinierte HTML-Attribute in Thymeleaf
Wir können ein benutzerdefiniertes Attribut in einem HTML-Tag mithilfe der folgenden Syntax angeben:
th:data-="" Erstellen wir ein einfaches Formular, mit dem sich ein Schüler für einen Kurs anmelden kann, um die Dinge in Aktion zu sehen:
Dieses Formular enthält eine Dropdown-Liste mit den verfügbaren Kursen und eine Schaltfläche zum Senden.
Angenommen, wir möchten dem Benutzer eine benutzerdefinierte Fehlermeldung anzeigen, wenn er auf "Senden" klickt, ohne einen Kurs auszuwählen.
Wir können die Fehlermeldung als benutzerdefiniertes Attribut im Tagselectpeichern und eine JavaScript-Funktion erstellen, um ihren Wert beim Senden des Formulars zu überprüfen.
Das aktualisierteselect-Tag sieht ungefähr so aus:
Hier rufen wir die Fehlermeldung aus dem Ressourcenpaket ab.
Wenn der Benutzer das Formular ohne Auswahl einer gültigen Option sendet, zeigt diese JavaScript-Funktion dem Benutzer eine Fehlermeldung an:
function validateForm() {
var e = document.getElementById("course");
var value = e.options[e.selectedIndex].value;
if (value == '') {
var error = document.getElementById("errormesg");
error.textContent = e.getAttribute('data-validation-message');
return false;
}
return true;
}In ähnlicher Weise können wir HTML-Tags mehrere benutzerdefinierte Attribute hinzufügen, indem wir für jedes einzelne das Attributth:data-*definieren.
3. Fazit
In diesem kurzen Artikel haben wir untersucht, wie wir die Unterstützung von Thymeleaf nutzen können, um benutzerdefinierte Attribute in HTML5-Vorlagen hinzuzufügen.
Wie immer ist eine funktionierende Version dieses Codesover on Github verfügbar.