HTML DOM 비밀번호 입력 필드의 pattern 속성 사용법 완벽 가이드

개요

HTML DOM의 Input Password pattern 속성은 비밀번호 입력 필드(input type="password")의 pattern 속성 값을 설정하거나 반환하는 데 사용됩니다. pattern 속성에 지정된 정규 표현식(regular expression)을 기준으로 사용자가 입력한 비밀번호의 유효성을 자동으로 검사할 수 있습니다.

문법(Syntax)

pattern 속성을 설정하는 기본 문법은 다음과 같습니다.

passwordObject.pattern = regexp

여기서 regexp는 비밀번호 필드의 입력값을 검사할 때 기준이 되는 정규 표현식입니다.

예제(Example)

다음은 비밀번호 pattern 속성을 활용한 예제입니다. 이 예제에서는 비밀번호가 숫자 3자리 또는 a부터 g까지의 알파벳 6글자 중 하나의 형식이어야 합니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Password pattern property</h1>
<p>The password can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
    function passPattern() {
        var P = document.getElementById("PASS").pattern;
        document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 비밀번호 입력 필드의 pattern 속성 사용법 완벽 가이드

pattern 속성에 지정된 정규 표현식과 일치하지 않는 비밀번호를 입력한 경우 −

GET PATTERN 버튼을 클릭한 경우 −

예제 코드 분석

위 예제에서는 type이 password이고, id="PASS", name="passW", pattern="[0-9]{3}|[a-g]{6}"인 input 요소를 생성했습니다. pattern 속성 값인 정규 표현식은 숫자 3자리 또는 a~g 범위의 알파벳 6글자를 입력하도록 규정합니다. 만약 입력값이 이 정규 표현식과 일치하지 않으면, title 속성의 내용이 입력 상자 위에 풍선 도움말 형태로 표시됩니다.

이 비밀번호 필드는 action 속성 값이 "/Sample_page.php"로 설정된 form 요소 안에 위치하며, 제출(submit) 버튼을 클릭하면 폼 데이터가 해당 주소로 전송됩니다.

<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>

그다음에는 사용자가 클릭하면 passPattern() 메서드를 실행하는 GET PATTERN 버튼을 만들었습니다.

<button onclick="passPattern()">GET PATTERN</button>

passPattern() 함수는 getElementById() 메서드를 사용하여 password 타입의 입력 필드에 접근한 뒤, 해당 요소의 pattern 속성 값을 가져옵니다. 이 값은 문자열 형태의 정규 표현식이며, 변수 P에 저장된 후 innerHTML 속성을 통해 id가 "Sample"인 단락에 출력됩니다.

function passPattern() {
    var P = document.getElementById("PASS").pattern;
    document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}

참고 사항

pattern 속성은 HTML5에서 새롭게 도입된 기능으로, 대부분의 최신 브라우저에서 지원됩니다. 정규 표현식 작성 시 {n}, {n,m} 같은 수량자를 활용하면 길이 제한까지 포함한 정교한 유효성 검사가 가능합니다. 또한 title 속성을 함께 사용하면 입력 형식이 맞지 않을 때 사용자에게 구체적인 안내 메시지를 제공할 수 있어 사용자 경험(UX) 측면에서도 큰 도움이 됩니다.