HTML 양식 유효성 검사 오류 메시지를 어떻게 사용자 정의할 수 있습니까?

HTML 양식에 대한 확인 메시지 사용자 정의

HTML 양식을 확인할 때 기본 오류 메시지는 정보가 없거나 혼란스러울 수 있습니다. 사용자 경험을 향상하려면 더 명확하고 의미 있는 상호 작용을 위해 이러한 메시지를 사용자 정의할 수 있습니다.

기본 유효성 검사 메시지를 변경하는 방법:

HTML5 유효성 검사 API는 다음을 제공합니다. 잘못된 입력에 대한 사용자 정의 오류 메시지를 지정할 수 있는 setCustomValidity()라는 메서드.

예를 들어, 제공된 HTML 양식에는 다음이 포함됩니다. 필수 속성이 있는 사용자 이름 및 비밀번호 입력 필드입니다. 기본적으로 빈 필드가 있는 양식을 제출하면 브라우저에 "이 필드를 작성하십시오."라는 메시지가 표시됩니다. 이 메시지를 사용자 정의하려면 setCustomValidity():

<input type="text">

여기서 입력 필드가 유효하지 않을 때 oninvalid 속성이 트리거되어 사용자 정의 오류 메시지를 설정합니다. oninput 속성은 사용자가 새 데이터를 입력할 때 오류 메시지를 재설정하여 사용자 경험을 향상시키므로 중요합니다.

비밀번호 필드 오류 사용자 정의:

제공된 예에서 , 비밀번호 필드의 기본 오류는 *입니다. 이는 JavaScript 내에서 유효성 검사를 처리하여 변경할 수 있습니다. 방법은 다음과 같습니다.

function login() {
  let username = document.getElementById("username");
  let password = document.getElementById("pass");

  if (username.value === "" || password.value === "") {
    alert("Please fill out both fields");
    return false;
  }
}

이 시나리오에서는 빈 사용자 이름이나 비밀번호를 제출하면 경고 기능이 실행되어 맞춤 오류 메시지가 표시됩니다.

위 내용은 HTML 양식 유효성 검사 오류 메시지를 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!