[HTML/CSS] 입력폼 유효성 검사에 필요한 input태그 pattern 속성

 

과거엔 input태그에 양식을 작성하고, 데이터의 유효성을 검사하는 것은 JS로 해야했다.

이렇게 하면 만약 정규식을 쓰는 경우 입력 폼 하나하나마다의 정규식이 다르기 때문에 각각의 로직을 만들어야 한다.

코드량이 너무 많아지는게 맘에안든다.

 

이시대에 이렇게까지 해야한다고...?라는 생각이 들어 검색을 해보니, 역시나 이렇게 하지 않아도 된다.

HTML5부터 input태그에 pattern속성을 사용할 수 있고, 여기에 정규식을 입력하면 자바스크립트로 유효성검사를 하지 않아도 자동으로 체크해준다.

 

추가로 maxLength, minLength 속성으로 최소, 최대 길이를 지정할 수도 있다. 이 속성을 적용하면 지정한 길이 밖으로는 입력이 되지 않는다.

 

<input type="tel" class="form-control" name="buyer_tel" id="phone" placeholder="010-0000-0000 ('-' 없이 입력)" 
    pattern="\d*" minlength="10" maxlength="11" 
    required>

 

예시로 전화번호 입력폼을 가져왔다.

 

해당 정규식은 숫자만 입력가능한 정규식이고, minLength와 maxLength를 지정해 전화번호 길이만큼만 입력할 수 있도록 했다.

 

이렇게 pattern속성을 지정하면 조건을 충족하기 전까진 submit을 눌러도 전송이 되지 않는다.

그리고 부트스트랩을 쓰거나 다른 처리를 해주지 않아도 자동으로 알림메시지가 뜬다.

순수 html로만 작성할 때, 오류메시지를 다르게 보여주고 싶다면 input 태그안에 title 속성을 추가하면 된다.

<input type="tel" name="buyer_tel" id="phone" placeholder="010-0000-0000 ('-' 없이 입력)" 
    pattern="\d*" minlength="10" maxlength="11"
    title="오류메시지를 보여주고 싶다면 이안에"
    required>

 

맨 마지막 required속성은 입력하지 않고 전송하는 경우를 방지한다.

 

---

많이 쓰이는 정규식 정리

 

이메일 정규식

pattern="^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}"

 

이름 정규식(한글, 영문 가능 / 혼용은 불가)

pattern="^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}"

 

전화번호 (하이픈'-' 넣지 않고 순수 번호만 입력할 때)

pattern="\d*" minlength="10" maxlength="11"