IT 정보

html input pattern 정규표현식 모음

네오매니아 2020. 12. 1. 12:47

직업이 웹프로그래머이다 보니 정규표현식(Regular Expression)을 은근히(?) 자주 쓰게 된다.

아주 예전에는 입력 값의 유효성 검사를 하려면 자바스크립트를 사용하거나 서버 사이드 스크립트를 사용해 처리해야만 했다.

 

하지만 html5 이후 input 태그의 pattern 속성에 정규표현식을 넣으면서 유효성 검사를 위한 입력 값 제한을 비교적 간단하게 구현할 수 있다.

물론 이중, 삼중의 보안과 완전한 입력 값 컨트롤을 요한다면 서버 사이드 스크립트에서 처리하는 것과 병행해서 사용하는 것이 좋다고 생각한다.

 

은근히 자주 쓰이는 정규표현식을 틈날 때마다 조금씩 모아볼 생각이다.

내가 써먹으려고 하는 이유도 있고 혹시라도 초보 프로그래머, 퍼블리셔 분들에게 도움이 될까 싶어서이기도 하다.

IT 고수들에게는 아마도 해당되지 않을게다. ^^

 

 

input pattern 정규표현식 모음

 

1. 숫자만

<input type="text" name="patternValue" pattern="\d*">
<input type="text" name="patternValue" pattern="^[0-9]+$">

 

2. 영문 대소문자만

<input type="text" name="patternValue" pattern="^[a-zA-Z]+$">

 

3. 영문 대소문자만 (띄어쓰기 및 공백 가능)

<input type="text" name="patternValue" pattern="^[a-zA-Z\s]+$">

 

4. 숫자, 영문 대소문자만

<input type="text" name="patternValue" pattern="^[a-zA-Z0-9]+$">

 

5. 최소 8자리에서 최대 16자리까지 숫자, 영문, 특수문자 각 1개 이상 포함 (암호 유효성 검사에 유용)

<input type="text" name="patternValue" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$">

 

다른 업무가 있는 관계로 일단 여기까지...

차차 시간날 때마다 정규표현식 하나씩 추가해보도록 하겠다.