HTML 양식에 맞춤형 메시징을 만드는 두 가지 방법

html 양식에는 필요에 따라 입력 설정, 범위 슬라이더의 최소 및 최대 제약 조건 설정 및 형식이 올바른지 확인하기 위해 이메일 입력 모드를 설정하는 것과 같은 사전 정의 된 규칙을 기반으로 양식 입력 및 기타 컨트롤을 확인하는 내장 메소드가 있습니다. 기본 HTML 및 브라우저는 복잡한 스크립트없이 양식 제출을 확인하기위한 많은 "무료"기능을 제공합니다.

무언가가 올바르게 확인되지 않으면? 양식을 사용하는 사람에게 표시 할 "무료"오류 메시지가 표시됩니다.

이들은 일반적으로 작업을 완료하기에 충분하지만보다 구체적인 오류 컨텐츠가 필요한 경우 특히 브라우저에서 번역 된 컨텐츠를 처리 해야하는 경우 이러한 메시지를 무시해야 할 수도 있습니다. 작동 방식은 다음과 같습니다.

제약 조건 api

구속 조건 API는 기본 HTML 양식 유효성 검사 메시지를 무시하는 데 사용되며 자체 오류 메시지를 정의 할 수 있습니다. Chris Ferdinandi는 심지어 CSS- 트릭에서 이것에 대해 자세히 살펴 보았습니다.

요컨대, 제약 조건 API는 입력 요소에 대한 제어를 제공하도록 설계되었습니다. API는 단일 입력 요소 또는 양식 요소에서 직접 호출 할 수 있습니다.

예를 들어 ^{우리 가이 간단한 양식 입력을 사용하고 있다고 가정합니다.}

우리는

요소를 가져 와서

메소드를 호출 한 다음 사용자 지정 메시지를 전달하여 자신의 오류 메시지를 설정할 수 있습니다.

제출 버튼을 클릭하면 기본 메시지 위치에 지정된 메시지가 표시됩니다.

사용자 정의 양식 검증 메시지의 번역

사용자 정의 오류 메시지의 주요 사용 사례 중 하나는 국제화를 더 잘 처리하는 것입니다. 우리는 두 가지 주요 방법으로 이것을 할 수 있습니다. 이것을 달성하는 다른 방법이 있지만, 여기서 내가 가장 간단하다고 생각하는 것을 여기에 소개 할 것입니다.

방법 1 : 브라우저의 언어 설정을 사용하십시오 첫 번째 방법은 브라우저 언어 설정을 사용하는 것입니다. 브라우저에서 언어 설정을 얻은 다음 언어를 지원하는지 확인할 수 있습니다. 언어를 지원하면 번역 된 메시지를 반환 할 수 있습니다. 특정 언어를 지원하지 않으면 대체 응답이 제공됩니다.

이전 HTML을 계속 사용하면 선호하는 언어 (스크립트 태그 내부)를 저장하기 위해 번역 객체를 만듭니다. 이 경우 대상은 영어, 스와힐리어 및 아랍어를 지원합니다.

다음으로, 우리는 객체의 태그를 추출하여 브라우저의 언어와 일치시켜야합니다.

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

fullNameInput 기능은 지원되는 브라우저 언어 또는 대체 언어를 영어로 비교하고 반환합니다. 버튼을 클릭하면 예제를 실행하면 사용자 정의 오류 메시지가 표시되어야합니다. setCustomValidity() 방법 2 : 로컬 스토리지에서 선호하는 언어를 설정 두 번째 방법은 LocalStorage에서 사용자 정의 언어 설정을 사용하는 것입니다. 다시 말해, 우리는 사용자에게 옵션 태그가 포함 된

요소에서 선호하는 언어를 먼저 선택하도록 요청합니다. 일단 선택이 이루어지면, 우리는 선호도를 LocalStorage에 저장하여 참조 할 수 있습니다. <option></option> 요소를 사용하면 LocalStorage를 확인하고 저장된 환경 설정을 사용하여 번역 된 사용자 지정 확인 메시지를 반환하는 스크립트를 만들 수 있습니다. <select></select> 이 스크립트는 초기 값을 현재 선택한 옵션으로 설정하고 값을 LocalStorage에 저장 한 다음 필요에 따라 LocalStorage에서 검색합니다. 한편, 스크립트는 요소에 의해 트리거 된 모든 변경 이벤트에서 선택한 옵션을 업데이트하면서 원래의 폴백을 유지하여 우수한 사용자 경험을 보장합니다.

DevTools를 켜면 언어 기본 설정을 선택할 때 사용자의 선호 값이 LocalStorage에서 사용할 수 있음을 알 수 있습니다.

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

요약 그게 다야! 이 빠른 트릭이 도움이되기를 바랍니다. 제약 조건 API를 사용하는 방법을 알아 내기 전에 전에 갖고 싶다는 것을 알고 있습니다. 이것은 웹에서 가능한 것 중 하나이지만 정확한 방법은 찾기가 어렵습니다. <select></select>

참조

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

Form Verification Series (Chris Ferdinandi) 의사 클래스 선택기 (Chris Coyier) 를 이해하십시오 제약 조건 검증 (mdn) 클라이언트 양식 검증 (MDN)

위 내용은 HTML 양식에 맞춤형 메시징을 만드는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!