jQuery 강좌8. 핸드폰 번호만 입력받기

과제

폼 입력에 사용자가 숫자와 +, - 기호만 입력할수 있게 하고 싶다.

해결

먼저 아래와 같이 라벨과 submit 버튼 그리고 오류메세지 필드를 만들어 봅시다.

<form id="signup" method="post" action="">
< div><span class="test_label">핸드폰 번호를 입력하세요. </span><input type="text" class="test_infobox" name="phone" />

< span class="test_error">숫자와 +,- 만 입력하실수 있습니다.</span></div>

< input class="test_submit" type="submit" value="입력">

< /form>

각 엘리먼트의 class 속성에 각각 "test_label" , "test_infobox", "test_submit", "test_error"를 지정해줍니다.

스크립트 소스는 아래와 같습니다.

$(document).ready(function() {

$('.test_error').hide();

$('.submit').click(function(event){

var data=$('.test_infobox').val();

if(validate_phoneno(data))

{

$('.test_error').hide();

}

else

{

$('.test_error').show();

event.preventDefault();

}

});

});

function validate_phoneno(ph)

{

var pattern=new RegExp(/^[0-9-+]+$/);

return pattern.test(ph);

} 

 

from. http://webnoon.net/entry/jQuery-강좌-핸드폰-번호만-입력받기