HTML5에는 다양한 양식 유효성 검사 기능이 내장되어 있어 개발자가 양식에 유효성 검사를 쉽게 추가할 수 있습니다. 이러한 기능 중 하나는 입력 필드가 필수이고 양식을 제출하기 전에 채워야 함을 지정하는 "required" 속성입니다.
"필수" 속성은 부울 속성입니다. 양식에 "필수" 속성이 있는 입력 필드가 있는 경우 양식을 제출하기 전에 이 필드를 채워야 합니다.
양식을 제출하기 전에 특정 필드를 공백으로 남겨두면 사용자의 브라우저에 이 입력 필드가 필수라는 것을 알리는 오류 메시지가 표시됩니다.
"필수" 속성을 사용하려면 필수로 설정하려는 입력 필드에 속성을 추가하기만 하면 됩니다. -
으아악양식을 제출하기 전에 브라우저는 입력 필드가 채워졌는지 확인하고, 그렇지 않은 경우 오류 메시지가 표시됩니다. 브라우저에 따라 기본 오류 메시지가 다를 수 있지만 일반적으로 해당 필드가 필수라고 명시되어 있습니다.
필드가 유효하지 않을 때 사용자에게 전송될 고유한 메시지를 지정하여 유효하지 않은 입력에 대한 메시지를 변경할 수도 있습니다. "title" 속성을 사용하여 기본 확인 메시지를 변경할 수 있습니다 -
으아악양식 제출 시 입력란을 비워두면 이 코드는 사용자에게 "이름을 입력하세요"라는 메시지를 표시합니다.
양식이 채워질 때마다 입력이 일치해야 하는 정규식을 지정하기 위해 HTML5는 "제목" 속성 외에 "패턴" 요소를 제공하므로 프로그래머는 입력이 허용되기 위해 일치해야 하는 정규식을 지정할 수 있습니다. . 입력이 필수 패턴과 일치하지 않으면 사용자는 브라우저에 오류 알림이 표시됩니다.
다음은 "pattern" 속성을 사용하여 입력 필드의 최소 길이를 지정하는 방법에 대한 예입니다. -
으아악입력 조건에 맞지 않는 경우 "3자 이상 입력해주세요"라는 메시지가 표시됩니다. 이 코드를 사용하려면 입력 필드에 3자 이상이 포함되어야 합니다.
CSS를 사용하면 오류 메시지의 모양을 변경할 수 있습니다. 기본적으로 오류 메시지는 입력 필드에 작은 텍스트 노드로 추가되고 빨간색 글꼴로 작성됩니다. 그러나 오류 메시지의 모양을 수정하고 CSS를 사용하여 표시 방법을 제어할 수 있습니다.
입력 필드가 유효하지 않은 경우 ":invalid" 의사 클래스를 사용하여 입력 필드를 선택할 수 있으며, CSS 속성을 사용하여 오류 메시지 스타일을 변경할 수 있습니다.
다음은 CSS를 사용하여 오류 메시지 스타일을 사용자 정의하는 방법의 예입니다.
으아악입력 필드가 유효하지 않은 경우 이 코드는 테두리를 빨간색으로 바꾸고 오류 메시지를 굵은 빨간색으로 표시합니다.
JavaScript를 사용하여 오류 메시지 맞춤설정
CSS를 사용하는 것 외에도 JavaScript를 사용하여 오류 메시지를 사용자 정의하고 표시 방법을 제어할 수도 있습니다.
JavaScript를 사용하여 오류 메시지를 사용자 정의하려면 "setCustomValidity" 메소드를 사용하여 입력 필드에 대한 사용자 정의 오류 메시지를 지정할 수 있습니다.
다음은 "setCustomValidity" 메소드를 사용하여 사용자 정의 오류 메시지를 설정하는 방법의 예입니다. -
으아악이 코드는 입력 필드의 오류 메시지를 "유효한 값을 입력하세요"로 설정합니다.
결론개발자는 HTML5 양식에 양식 유효성 검사를 신속하게 추가하고 "필요한" 요소를 활용하고 유효성 검사 메시지를 사용자 정의하여 사용자가 필요한 정보를 제공했는지 확인할 수 있습니다. 많은 웹 애플리케이션은 사용자 입력의 정확성과 완전성을 보장하는 중요한 도구이기 때문에 양식 유효성 검사에 의존합니다.
위 내용은 HTML5에서 사용자 정의 유효성 검사 메시지를 사용하여 필수 속성을 형성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
