pattern 속성

pattern 속성은 HTML 폼 입력 필드의 정규 표현식 유효성 검사를 지정합니다.

정규식은 거의 모든 유효성 검사 규칙을 생성할 수 있게 해주는 특별한 명령입니다. 자세한 내용은 PHP 정규식 책 또는 JavaScript 정규식 책에서 확인할 수 있습니다.

이 속성이 있는 필드가 채워지지 않은 상태에서 폼을 제출하려고 하면, 브라우저는 폼 제출을 허용하지 않고 도움말 풍선 형태로 오류 메시지를 표시합니다. 안타깝게도 HTML이나 CSS를 사용하여 이 오류 메시지의 텍스트나 모양을 변경할 수 없습니다.

pattern 속성의 존재는 (이 속성을 통한 검증은 쉽게 우회할 수 있으므로) PHP를 사용한 서버 측 폼 유효성 검사를 대체하지 않는다는 점을 명심하세요.

pattern 속성은 input 태그나 textarea 태그에 적용해야 합니다.

예제

input 태그에 pattern 속성을 추가해 보겠습니다. 이 속성에는 입력 필드에 두 자리 숫자(예: 25)가 입력되었는지 검사하는 정규 표현식을 넣겠습니다.

아무 숫자를 입력하고 버튼을 눌러 폼을 제출해 보세요. 두 자리 숫자가 아닌 값을 입력하면 브라우저는 폼 제출을 허용하지 않고 오류 메시지를 표시합니다. 그렇지 않으면 폼이 제출됩니다:

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

이전 예제에서 브라우저는 필드가 비어 있지 않은 경우에만 오류를 표시했습니다 (비어 있는 필드는 두 자리 숫자가 아니더라도). 이제 빈 필드에서도 오류가 발생하도록 만들어 보겠습니다. pattern 속성과 함께 required 속성도 추가하겠습니다:

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>