과제
폼 입력에 사용자가 숫자와 +, - 기호만 입력할수 있게 하고 싶다.
해결
먼저 아래와 같이 라벨과 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>
<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);
}
동작은 아래와 같이...
'프로그래밍 > jquery' 카테고리의 다른 글
| jQuery 강좌 - 핸드폰 번호만 입력받기 (6) | 2010/05/01 |
|---|---|
| jQuey 강좌 7 - 폰트 크기 변경하기 (2) | 2010/03/25 |
| jQuery 강좌 - Selector(선택자) 개념 (2) | 2010/02/07 |
| jQuey 강좌 6 - Select 필드를 동적으로 변경하기 width PHP (8) | 2009/11/14 |
TAG jQuery 강좌
