HTML DOM Input URL 패턴(pattern) 속성 완벽 정리

HTML DOM의 Input URL pattern 속성은 URL 입력 필드(input type="url")에 적용된 정규 표현식(regular expression)을 설정하거나 반환하는 속성입니다. 이 패턴 값은 사용자가 URL 필드에 입력한 텍스트와 대조되어 유효성 검사에 활용됩니다.

문법(Syntax)

pattern 속성의 기본 문법은 다음과 같습니다.

정규 표현식 반환하기

inputURLObject.pattern

정규 표현식 설정하기

inputURLObject.pattern = 'RegExp'

예제(Example)

다음은 Input URL pattern 속성을 활용한 실제 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-pattern</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" pattern="https?://www.+[a-zA-Z0-9]+.com">
</label>
<input type="submit" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'pattern: '+inputURL.pattern;
    function checkPattern() {
        if(inputURL.value !== ''){
            alert("Redirecting to "+User);
        }
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Submit' 버튼 클릭 전

페이지가 로드되면 자바스크립트가 실행되어 현재 설정된 pattern 값을 화면에 출력합니다.

HTML DOM Input URL 패턴(pattern) 속성 완벽 정리

잘못된 패턴으로 'Submit' 버튼 클릭 시

입력값이 지정된 정규 표현식(https?://www.+[a-zA-Z0-9]+.com)과 일치하지 않으면 브라우저가 폼 제출을 차단하고 유효성 오류 메시지를 표시합니다.

HTML DOM Input URL 패턴(pattern) 속성 완벽 정리

올바른 패턴으로 'Submit' 버튼 클릭 시

입력값이 정규 표현식 조건을 충족하면 폼이 정상적으로 제출됩니다.

HTML DOM Input URL 패턴(pattern) 속성 완벽 정리

정리

pattern 속성을 사용하면 별도의 자바스크립트 유효성 검사 코드 없이도 HTML만으로 URL 형식 검증이 가능합니다. 다만 클라이언트 측 검증은 우회될 수 있으므로, 서버 측에서도 반드시 동일한 유효성 검사를 함께 수행하는 것이 안전합니다.