HTML DOM 입력 이메일 패턴 속성이란?
HTML DOM의 Input Email 패턴(pattern) 속성은 이메일 입력 필드(<input type="email">)에 적용할 정규 표현식(regular expression)을 설정하거나 반환하는 기능입니다. pattern 속성에 지정된 값은 사용자가 이메일 필드에 입력한 텍스트와 대조되어 폼 제출 시 유효성 검사에 활용됩니다.
즉, 특정 도메인이나 형식의 이메일만 허용하고 싶을 때 pattern 속성을 사용하면 별도의 자바스크립트 검증 로직 없이도 브라우저 차원에서 입력값을 제어할 수 있습니다.
문법(Syntax)
패턴 속성의 기본 문법은 다음과 같습니다.
- 정규 표현식 반환하기
inputEmailObject.pattern
- 정규 표현식 설정하기
inputEmailObject.pattern = 'RegExp'
예제 코드
다음은 Input Email pattern 속성을 실제로 활용한 예제입니다. 이메일 주소가 [a-zA-z0-9]+@+MNC.com 패턴과 일치하는지 검사하고, 제출 시 결과를 알림 창으로 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Email pattern</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="submit"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form onsubmit="checkPattern()">
<fieldset>
<legend>Email-pattern</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" pattern="[a-zA-z0-9]+@+MNC.com" title="[a-zA-z0-9]+@+MNC.com">
</label>
<input type="submit" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'pattern: '+inputEmail.pattern;
function checkPattern() {
if(inputEmail.value !== ''){
var User = inputEmail.value.split("@")[0];
alert("Welcome "+User);
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
1) 'Submit' 버튼을 클릭하기 전
이메일 입력 필드 아래에 현재 설정된 pattern 값이 그대로 출력됩니다.
2) 잘못된 형식의 이메일 입력 후 'Submit' 클릭 시
입력값이 지정된 정규 표현식과 일치하지 않으면 브라우저가 유효성 검사 오류를 표시하며 폼 제출이 차단됩니다. 이때 title 속성에 넣어둔 문구가 힌트로 함께 나타납니다.
3) 올바른 형식의 이메일 입력 후 'Submit' 클릭 시
패턴 검사를 통과하면 '@' 앞부분(사용자 이름)을 추출해 "Welcome [사용자명]" 형태의 환영 알림 창이 뜹니다.
정리
Input Email의 pattern 속성은 정규 표현식 기반의 간편한 클라이언트 측 유효성 검사 수단입니다. 반환과 설정이 모두 가능하며, title 속성과 함께 사용하면 사용자에게 허용되는 입력 형식을 명확히 안내할 수 있어 폼 UX를 크게 향상시킵니다.