知識庫 / Spring / Spring MVC RSS 訂閱

現在，讓我們看看如何使用 Thymeleaf 的默認方言來定義這些屬性。

3. 在 Thymeleaf 中自定義 HTML 屬性

我們可以使用以下語法，在 HTML 標籤中指定自定義屬性：

th:data-<attribute_name>=""

讓我們創建一個簡單的表單，允許學生註冊課程，以便親眼見證其效果：

<form action="#" th:action="@{/registerCourse}" th:object="${course}"
    method="post" onsubmit="return validateForm();">
    <span id="errormesg" style="color: red"></span> <span
      style="font-weight: bold" th:text="${successMessage}"></span>
    <table>
        <tr>
            <td>
                <label th:text="#{msg.courseName}+': '"></label>
            </td>
            <td>
                <select id="course" th:field="*{name}">
                    <option th:value="''" th:text="'Select'"></option>
                    <option th:value="'Mathematics'" th:text="'Mathematics'"></option>
                    <option th:value="'History'" th:text="'History'"></option>
                </select></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

此表單包含一個下拉列表，列出了所有可用的課程，以及一個提交按鈕。

假設我們希望在用户點擊提交按鈕但未選擇課程時，向用户顯示自定義錯誤消息。

我們可以將錯誤消息保存為 select 標籤中的自定義屬性，並創建一個 JavaScript 函數來在提交表單時驗證其值。

更新後的 select 標籤大致如下所示：

<select id="course" th:field="*{name}" th:data-validation-message="#{msg.courseName.mandatory}">

在這裏，我們從資源包中獲取錯誤消息。

現在，當用户在不選擇有效選項的情況下提交表單時，此 JavaScript 函數將向用户顯示錯誤消息：

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;
}

同樣，我們也可以通過定義 屬性來為每個 HTML 標籤添加多個自定義屬性。