[js] JS - pattern 속성 - INPUT 텍스트 정규식패턴 설정/반환 (= pattern속성 = 패턴속성) ※ 인풋 패턴 속성

목차

1. pattern 예제 - INPUT 텍스트 패턴 얻기
2. pattern 정의
3. pattern 구문
4. pattern 예제 - INPUT 텍스트 패턴 설정

pattern 예제 - INPUT 텍스트 패턴 얻기

 

<form action="/action_page.php">

  국가코드: <input type="text" id="hz" name="hz" pattern="[A-Za-z]{3}" title="3글자 영문 국가코드">

  <input type="submit">

</form>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").pattern;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

pattern 정의

 

INPUT 텍스트에 입력 허용 체크할 정규표현식을 지정하는 pattern 속성을 설정/반환.

 

---

 

1.

• pattern 설명 위해 HTML title 속성이나 JS DOM title 속성 사용 권장.
• 정규표현식 자세히 보기

 

2.

IE10 이상 주요 최신 브라우저 지원.

단, Safari 브라우저는 지원 X.

 

pattern 구문

 

반환

textObject.pattern

 

설정

textObject.pattern = regexp

 

---

[속성값]

 

regexp

텍스트 필드에 입력 허용할 정규식 패턴

 

---

[반환값]

 

정규표현식 나타내는 문자열 반환.

 

pattern 예제 - INPUT 텍스트 패턴 설정

 

<form action="/action_page.php">

  Zip 코드: <input type="text" id="hz" name="hz">

  <input type="submit">

</form>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("hz").pattern = "[1-3]";

  document.getElementById("hz").title = "1~3 숫자";

  document.getElementById("demo").innerHTML = "1~3 숫자만 포함 가능";

}

</script>

 

결과보기