input tag의 pattern attribute(feat. title)

Sming·2022년 5월 19일
1

pattern

굉장히 생소할수 있는 input 태그의 pattern attribute이다. 이것은 과연 어디에 사용을 하고 어떻게 사용을 할까?

사용용도

input 태그에 required 속성을 추가하고 값을 입력하지 않은채 제출을 하게 되면 브라우저에서 값을 입력해주세요 라는 메시지를 던져준다. 이런 메시지를 사용자가 직접 어떤 상황에서 어떤 메시지를 보낼것인지 정할수 있다.

사용방법

pattern은 주로 title이라는 속성과 함께 사용이 된다.

pattern에는 정규표현식이 들어가며 그 정규표현식에 맞지않는 input이 들어간상태로 제출을 하면 메시지를 던져준다.

title은 메시지에 들어갈 내용이다. required에 값을 입력해주세요가 들어가듯이 title에 들어간 문자가 브라우저단에서 메시지로 나타나게 된다.

예시

<input type="text" pattern="^[1-9]{1}$|^[1-3]{1}[0-9]{1}$|^4{1}[0-5]{1}$" title="1과 45사이의 숫자를 입력하세요"/ >

이번에 사용한 pattern의 방식이다. pattern내에 들어간 정규식은 1-45까지의 숫자가 들어가는지 검증하는 표현식이고 기존 정규식쓰는것과 다르게 양끝에 /를 넣지 않아도 된다.

title에는 커스텀 메시지에 보여줄 문장을 넣어주었다.

이런식으로 나오게 된다.

주의할점

input의 타입이 다음과 같을때만 사용이 가능하다.

  • date
  • email
  • password
  • search
  • tel
  • text
  • url
profile
딩구르르

0개의 댓글