input type tel 연락처만 입력받고, 패턴과 유효성을 확인

반응형웹, 모바일웹 등 input 입력란에 연락처 입력 시 활용하는 방법입니다.

 

1. input type="tel"

<input type="tel" name="" value=""/>

 

 

연락처 입력 시 가장 유용한 type 입니다. 모바일 기기에서 input focus 시 숫자패드가 열리게 되죠.  기본적으로 pattern을 검증하지 않으므로 패턴검증이 필요하다면 pattern을 추가합니다.

 

 

<input type="tel" name ="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" placeholder="010-0000-0000" />

패턴에 맞춰 입력을 권장한다면 placeholder 예시로 넣어두면 좋습니다.

 

 

 

<input type="tel" name ="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" placeholder="010-0000-0000" required />

연락처가 필수 입력이라면 required 속성을 추가하여 form 전송 시 필수입력값을 확인하며, 패턴까지 확인하니 js, jquery에서 체크하여 확인할 일이 없을 것 같네요.