HTML의 pattern 속성은 입력 필드에 정규 표현식(Regular Expression)을 설정하여 사용자가 올바른 형식의 값을 입력했는지 검증할 수 있게 해주는 기능입니다. 이 속성은 다음과 같은 input 타입에서 사용할 수 있습니다.
- text
- url
- tel
- search
- date
- password
특히 비밀번호(password) 필드에서는 pattern 속성을 활용해 최소 요구 조건을 지정할 수 있습니다. 예를 들어, 비밀번호가 반드시 8자 이상이어야 한다는 규칙을 손쉽게 적용할 수 있습니다.
pattern 속성 예제
아래 코드를 실행하면 HTML에서 pattern 속성을 사용하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 비밀번호가 8자 이상이 되도록 패턴을 설정했습니다. 만약 사용자가 그보다 짧은 비밀번호를 입력한 상태에서 제출(Submit) 버튼을 클릭하면, "요청된 형식과 일치시켜 주세요: 8자 이상"이라는 오류 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>회원가입</h2>
<form action="/new.php">
학생 아이디<br><input type = "text" name = "name"/><br>
비밀번호<br><input type = "password" name = "password" pattern = ".{8}"
title="8자 이상 입력하세요"><br><br>
<input type = "submit" value = "제출">
</form>
</body>
</html>코드 설명
- pattern=".{8}" : 임의의 문자(.)가 8개 이상(,) 연속되어야 한다는 정규 표현식입니다.
- title 속성 : 유효성 검사에 실패했을 때 브라우저가 표시하는 안내 문구로 활용됩니다.
이처럼 pattern 속성을 사용하면 자바스크립트 코드 없이도 HTML만으로 기본적인 폼 유효성 검사를 구현할 수 있어 개발 편의성과 사용자 경험을 동시에 높일 수 있습니다.