HTML의 pattern 속성은 HTML 문서에서 <input> 요소에 입력된 값이 특정 정규 표현식(regular expression)과 일치하는지 검사하는 데 사용됩니다. 이 속성을 활용하면 별도의 자바스크립트 없이도 폼 제출 시 브라우저가 자동으로 입력값의 유효성을 검증할 수 있습니다.
문법(Syntax)
pattern 속성의 기본 문법은 다음과 같습니다.
<input pattern="정규 표현식">
pattern 속성은 text, search, url, tel, email, password 타입의 input 요소에서 사용할 수 있으며, 정규 표현식과 일치하지 않는 값이 입력되면 폼 제출이 차단되고 사용자에게 오류 메시지가 표시됩니다.
예제(Example)
아래 예제는 pattern 속성을 활용해 8자리 이상의 비밀번호만 입력 가능하도록 검증하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
input[type='password'] {
width: 300px;
padding: 8px 16px;
border: 2px solid #fff;
background: transparent;
border-radius: 20px;
display: block;
margin: 1rem auto;
outline: none;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
::placeholder {
color: #000;
}
</style>
<body>
<h1>HTML pattern 속성 예제</h1>
<form action="">
<input type="password" placeholder="계정 비밀번호를 입력하세요" required pattern=".{8}">
<input type="submit" value="Submit" class="btn" onclick='check()'>
</form>
<div class="show"></div>
<script>
function check() {
if (document.querySelector("input[type='password']").value.length < 8) {
document.querySelector(".show").innerHTML = '비밀번호는 8자리 이상 입력해야 합니다.'
};
}
</script>
</body>
</html>코드 설명
pattern=".{8}": 임의의 문자(.)가 8개 이상(8,) 연속되어야 한다는 의미의 정규 표현식입니다.required: 입력값이 비어 있으면 폼 제출을 막습니다.check()함수 : 자바스크립트로 비밀번호 길이를 추가로 확인해 경고 메시지를 화면에 출력합니다.
실행 결과(Output)
위 코드를 실행하면 비밀번호 입력창과 Submit 버튼이 나타납니다. 8자 미만의 짧은 비밀번호를 입력한 후 “Submit” 버튼을 클릭하면 아래와 같이 경고 메시지가 표시됩니다.
마무리
pattern 속성을 사용하면 전화번호 형식, 이메일 규칙, 비밀번호 조건 등 다양한 입력값 검증을 간단하게 처리할 수 있습니다. 정규 표현식과 함께 활용하면 프론트엔드 단계에서 데이터 품질을 크게 높일 수 있습니다.