HTML DOM의 Input Text pattern 속성은 텍스트 입력 필드(input type="text")의 pattern 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성에 정규 표현식(regular expression)을 지정하면, 사용자가 입력한 텍스트가 해당 패턴과 일치하는지 자동으로 검사하여 폼 유효성 검증에 활용할 수 있습니다.
문법(Syntax)
pattern 속성을 설정하는 기본 문법은 다음과 같습니다.
textObject.pattern = regexp
여기서 regexp는 텍스트 필드의 입력값을 검사할 때 기준이 되는 정규 표현식입니다.
예제(Example)
다음은 Input Text pattern 속성을 활용한 예제입니다. 사용자 이름(USERNAME)은 숫자 3자리 또는 a부터 g까지의 알파벳 6자리로만 입력할 수 있도록 패턴을 지정했습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Text pattern property</h1>
<p>The username can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
USERNAME: <input type="text" id="USR" name="user_name" pattern="[0-9]{3}|[a-g]{6}"
title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="textPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
function textPattern() {
var P = document.getElementById("USR").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
텍스트 필드에 pattern 속성에서 지정한 정규 표현식과 일치하지 않는 값을 입력한 후 제출하면, 아래와 같은 경고 메시지가 표시됩니다.
반면, GET PATTERN 버튼을 클릭하면 현재 설정된 pattern 속성의 값을 화면에 출력하여 확인할 수 있습니다.
