1. 개요

이 예제에서는 Thymeleaf를 사용하여 HTML5 태그에서 사용자 정의 속성을 정의하는 방법을 살펴 봅니다. 일반 HTML을 사용하여 동적 데이터를 표시 할 수있는 템플릿 엔진 프레임 워크입니다.

Thymeleaf 또는 Spring과의 통합에 대한 소개 기사는이 링크를 참조하십시오 .

2. HTML5의 맞춤 속성

때로는 클라이언트 측에서 일부 처리를 수행하기 위해 HTML 페이지에 추가 정보가 필요할 수 있습니다. 예를 들어, AJAX를 사용하여 양식을 제출하는 동안 사용할 수 있도록 양식 입력 태그 에 추가 데이터를 저장할 수 있습니다.

마찬가지로 양식을 작성하는 사용자에게 사용자 지정 유효성 검사 오류 메시지를 표시 할 수 있습니다.

어쨌든 HTML 5의 사용자 정의 속성을 사용하여이 추가 데이터를 제공 할 수 있습니다. 사용자 정의 속성은 data- 접두사를 사용하여 HTML 태그에 정의 할 수 있습니다 .

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

마찬가지로, 각각에 대해 th : ​​data- * 속성을 정의하여 HTML 태그에 여러 사용자 정의 속성을 추가 할 수 있습니다 .

3. 결론

이 빠른 기사에서는 Thymeleaf의 지원을 활용하여 HTML5 템플릿에 사용자 지정 속성을 추가하는 방법을 살펴 보았습니다.

항상 그렇듯이이 코드의 작동 버전은 Github에서 사용할 수 있습니다 .