본문 바로가기

JAVA개발

[JAVA 개발] jquery(제이쿼리) 회원가입 연락처 숫자만 입력 폼

숫자 입력만 가능한 폼을 작성하는방법을 두가지 보여드리겠습니다.

첫번째는 숫자 입력은 정상적으로 등록되며, 한글이나 기타 문자를 입력하게되면 자동으로 그부분만 삭제되는

소스입니다.

두번째는 숫자 입력은 정상적으로 등록되며, 한글이나 기타 문자를 입력하게되면 얼럿으로 처리하여

재입력 하도록 처리한 소스입니다.

먼저 첫번째 스크립트 소스 입니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(function(){
  $('#phone').keyup(function() {   
   $(this).val($(this).val().replace(/[^0-9]/g,""));
  }); //#phone.keyup 
 });
</script>

두번째 스크립트 소스 입니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(function(){
  $('#phone').keyup(function() {
   if (event.which && (event.which > 36 && event.which < 58 ||
    event.which > 95 && event.which <106 ||
    event.which == 8 || event.which == 9)){
     //alert("숫자다");
   }else{
    alert("숫자만 입력해주세요");
    $('#phone').val("");
    $('#phone').focus();
   }
  }); //#phone.keyup 
 });
</script>

JSP소스 입니다.

<body>
 <input type="text" id="phone" />
</body>

첫번째 소스

 두번째 소스

실행화면을 보시면 첫번째 화면의 경우 글작성시 바로바로 지워지기때문에 화면으로 보여드리기 어려워

직접 해보시는것이 좋을듯 합니다.

두번째 스크립트 소스 사용시에는 얼럿으로 보여지기때문에 실행화면으로 보여드리겠습니다.

숫자 123을 입력한뒤 영문자 f를 입력할경우 얼럿으로 표시되며 확인을 누르면 모든 내용이 삭제되며,

재입력 하는 소스 입니다. 

감사합니다.