jQuery Input 값 숫자만 허용하기 & 자동으로 전화번호 형식으로 변환 (정규식)

안녕하세요 나날이 격무에 시달리고 있는 또름입니다.

ㅎㅇㅎㅇ

오늘은... 회원가입이나, 무엇을 판매하기전 금액을 설정할때 등등 Input 태그에서 "입력할때" 간단히 유효성을 맞출수 있는 jquery를  슥슥 써보겠다.

 

Input이란... 무슨 정보를 받아야되냐에 따라서 숫자만 받아야 할 경우도 있고

전화번호 같은 경우에는 자동으로 하이픈(-)을 붙여서 형식을 통일 시켜야 할 경우가 있다.

(아무리 Input위에 숫자만 입력해달라고 해도 문자 넣으시는분들 천지..!)

 

이게 기본중의 기본으로 submit 할때나 backend에서 유효성을 검사하겠지만 (하겠죠?안하면 박살나겠죠???)

개발자도 사람인지라 까먹을수도있고 위와 같은 방식으로 유효성 체크를 하였을 경우에는

사용자가 submit버튼을 눌러서 에러띄우고 다시적게 하거나, submit 시키고 backend단에서 오류먹히고 튕기거나

사용자가 어떠한 액션을 반드시 취해야 하기 때문에 사용자가 영 귀찮아 한다;;

 

 

서론과 잡설이 길었으니 바로 코드를 보자

 

 

class 별로 이벤트를 주었고, keyup 이벤트로 입력시에 바로바로 처리 되도록 하였다.

약간의 응용만 하면 굉장히 유용한 스크립트다.

 

끗