[HTML] input pattern 정규식

input pattern 정규식

 

웹 개발을 하다보면 정규식(Regular Expression)을 자주 사용하게된다.

보통 자바스크립트를 사용하거나 서버 사이드 스크립트를 이용해 처리를 했었는데 html5 이후 input 태그의 pattern 속성에 정규표현식을 넣으면서 유효성 검사를 위한 입력 값 제한을 비교적 간단하게 구현할 수 있다.

보안과 안전한 입력 값 컨트롤이 필요하다면 서버 사이트 스크립트에서 처리하는 것이 좋지만 pattern은 간단하게 처리가 가능하다. 

 

* pattern 속성이 제대로 동작하는 input 요소의 type 속성값 : data, email, password, search, tel, text,  url

속성값	문법	설명
정규 표현식	<input pattern="정규 표현식">	<input> 요소의 값을 검사할 때 사용하는 정규 표현식

---

 

input pattern 정규식 표현식 예제 ▼

 

1. 숫자

<input type="text" name="number" pattern="\d*" title="숫자만">
<input type="text" name="number" pattern="^[0-9]+$" title="숫자만">

 

2. 숫자 6자리 (생년월일)

<input type="text" name="bday" pattern="[0-9]{6}" title="'yymmdd'와 같은 6자리 숫자">

 

3. 영문 대소문자

<input type="text" name="engNum" pattern="^[a-zA-Z]+$" title="영문 대소문자만">

 

4. 영문 대소문자 + 공백가능

<input type="text" name="engNumSpace" pattern="^[a-zA-Z\s]+$" title="영문 숫자 공백 가능">

 

5. 영문 + 특수문자 + 8에서 16 자리 숫자 (비밀번호)

<input type="password" name="pass" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$" title="영어 특수문자 숫자">

 

6. 전화번호

<input type="text" pattern="(010)-\d{3,4}-\d{4}" title="010-0000-0000 형식">

 

7. 이메일

<input type="email" name="email" pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$" title="이메일">

 

8. URL (http:// 또는 https:// 필수)

<input type="url" id="website" name="website" pattern="https?://.+" title="http:// 필수">

 

9. 검색 (따옴표 안됨)

<input type="search" id="search" name="search" pattern="[^'\x22]+" title="Invalid input" title="따옴표 안됨">

* ^ : 대괄호 밖에서 사용시 문자열 시작 부분에서 시작됨을 의미 하고 대괄호 안에서 사용하면 부정의 의미

 

10. 최소, 최대

<input type="text" name="minMaxNum" pattern=".{8,11}" title="8에서 11자리">

 

11. 8에서 11자리 (숫자 외 입력 시 replace)

<input type="text" name="userCel" id="userCel" value="" pattern=".{8,11}" title="번호를 확인하여 주시길 바랍니다."
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="숫자만 입력해주세요."/>

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)