HTML5에서 사용자 정의 유효성 검사 메시지를 사용하여 필수 속성을 형성합니다.

HTML5에는 다양한 양식 유효성 검사 기능이 내장되어 있어 개발자가 양식에 유효성 검사를 쉽게 추가할 수 있습니다. 이러한 기능 중 하나는 입력 필드가 필수이고 양식을 제출하기 전에 채워야 함을 지정하는 "required" 속성입니다.

"필수" 속성은 부울 속성입니다. 양식에 "필수" 속성이 있는 입력 필드가 있는 경우 양식을 제출하기 전에 이 필드를 채워야 합니다.

양식을 제출하기 전에 특정 필드를 공백으로 남겨두면 사용자의 브라우저에 이 입력 필드가 필수라는 것을 알리는 오류 메시지가 표시됩니다.

"필수" 속성을 사용하세요

"필수" 속성을 사용하려면 필수로 설정하려는 입력 필드에 속성을 추가하기만 하면 됩니다. -

으아악

양식을 제출하기 전에 브라우저는 입력 필드가 채워졌는지 확인하고, 그렇지 않은 경우 오류 메시지가 표시됩니다. 브라우저에 따라 기본 오류 메시지가 다를 수 있지만 일반적으로 해당 필드가 필수라고 명시되어 있습니다.

맞춤 확인 메시지

필드가 유효하지 않을 때 사용자에게 전송될 고유한 메시지를 지정하여 유효하지 않은 입력에 대한 메시지를 변경할 수도 있습니다. "title" 속성을 사용하여 기본 확인 메시지를 변경할 수 있습니다 -

으아악

양식 제출 시 입력란을 비워두면 이 코드는 사용자에게 "이름을 입력하세요"라는 메시지를 표시합니다.

양식이 채워질 때마다 입력이 일치해야 하는 정규식을 지정하기 위해 HTML5는 "제목" 속성 외에 "패턴" 요소를 제공하므로 프로그래머는 입력이 허용되기 위해 일치해야 하는 정규식을 지정할 수 있습니다. . 입력이 필수 패턴과 일치하지 않으면 사용자는 브라우저에 오류 알림이 표시됩니다.

예

다음은 "pattern" 속성을 사용하여 입력 필드의 최소 길이를 지정하는 방법에 대한 예입니다. -

으아악

입력 조건에 맞지 않는 경우 "3자 이상 입력해주세요"라는 메시지가 표시됩니다. 이 코드를 사용하려면 입력 필드에 3자 이상이 포함되어야 합니다.

맞춤형 오류 메시지 스타일

CSS를 사용하면 오류 메시지의 모양을 변경할 수 있습니다. 기본적으로 오류 메시지는 입력 필드에 작은 텍스트 노드로 추가되고 빨간색 글꼴로 작성됩니다. 그러나 오류 메시지의 모양을 수정하고 CSS를 사용하여 표시 방법을 제어할 수 있습니다.

입력 필드가 유효하지 않은 경우 ":invalid" 의사 클래스를 사용하여 입력 필드를 선택할 수 있으며, CSS 속성을 사용하여 오류 메시지 스타일을 변경할 수 있습니다.

예

다음은 CSS를 사용하여 오류 메시지 스타일을 사용자 정의하는 방법의 예입니다.

으아악

입력 필드가 유효하지 않은 경우 이 코드는 테두리를 빨간색으로 바꾸고 오류 메시지를 굵은 빨간색으로 표시합니다.

JavaScript를 사용하여 오류 메시지 맞춤설정

CSS를 사용하는 것 외에도 JavaScript를 사용하여 오류 메시지를 사용자 정의하고 표시 방법을 제어할 수도 있습니다.

JavaScript를 사용하여 오류 메시지를 사용자 정의하려면 "setCustomValidity" 메소드를 사용하여 입력 필드에 대한 사용자 정의 오류 메시지를 지정할 수 있습니다.

예

다음은 "setCustomValidity" 메소드를 사용하여 사용자 정의 오류 메시지를 설정하는 방법의 예입니다. -

으아악

이 코드는 입력 필드의 오류 메시지를 "유효한 값을 입력하세요"로 설정합니다.

결론

이 글에서는 개인화된 확인 메시지를 HTML5 "필요한" 요소와 결합하는 방법을 살펴보았습니다. 우리는 양식 유효성 검사의 기본 사항인 "필요한" 태그와 JavaScript 및 CSS를 활용하여 유효성 검사 메시지를 개인화하는 방법에 대해 논의했습니다.

개발자는 HTML5 양식에 양식 유효성 검사를 신속하게 추가하고 "필요한" 요소를 활용하고 유효성 검사 메시지를 사용자 정의하여 사용자가 필요한 정보를 제공했는지 확인할 수 있습니다. 많은 웹 애플리케이션은 사용자 입력의 정확성과 완전성을 보장하는 중요한 도구이기 때문에 양식 유효성 검사에 의존합니다.

위 내용은 HTML5에서 사용자 정의 유효성 검사 메시지를 사용하여 필수 속성을 형성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!