|
|
유효성검사- 숫자만 입력 |
▶▷ 알아두면 좋은 것들
안녕하세요~ 이번글에서는 만들어놓은 폼에 숫자만 입력될 수 있도록 해볼거에요.
제가 가정해 놓은 유효성 검사 방법은 두가지인데요~
첫번째는 isNaN 함수를 활용한 데이터 검증입니다.
입력이 끝난상태에서 다른 폼으로 이동할 때, 숫자가 아닌 값이 존재할 경우를 메시지를 보이구요,
두번째는 키 입력 방지 입니다.
입력을 하는 매 순간에, 숫자키가 아닌 다른 키를 조작했을때 메시지와 함께 입력이 되지않는 경우를 보이겠습니다.
이래저래 알아두어야 할것은 많지만 소스와 함께 시작해 볼게요 ^^
소스(Source)
소스 다운 
Doit.html
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 유효성 검사3</TITLE>
</HEAD>
<SCRIPT language="javaScript">
function check_input1_onblur(){
var theForm=document.frm1;
1. if(isNaN(theForm.input1.value)){
alert("숫자가 아닌 값이 있습니다. 확인해 주세요.");
theForm.input1.select();
}
}
function check_input2_onkeydown(){
var theForm=document.frm1;
2. if( !( (event.keyCode >= 48 && event.keyCode<=57) || (event.keyCode >= 96 && event.keyCode <= 105)
|| event.keyCode==8 ) ){
alert("이것은 숫자가 아닙니다. ");
event.returnValue=false;
}
}
</SCRIPT>
<BODY>
<FORM name=frm1>
숫자 입력란1 : <input type=text name=input1 size=10 onblur=check_input1_onblur()> <br>
숫자 입력란2 : <input type=text name=input2 size=10 onkeydown=check_input2_onkeydown()> <br>
<input type=button value="check" onclick="check_onclick()">
</FORM>
</BODY>
</HTML>
소스설명
1. isNaN 함수를 활용한 데이터 검증
alert("숫자가 아닌 값이 있습니다. 확인해 주세요.");
theForm.input1.select();
}
- 첫번째 함수 입니다. 우선, 이 함수를 실행시키는 이벤트를 보시게 되면 <BODY>태그 내의 폼에 숫자 입력란1의 onblur 이벤트 핸들러를 볼 수 있는데요. 이 이벤트 핸들러는 포커스가 해당 폼에서 없어질때 실행됩니다.
여기서 if문의 조건문을 보게 되시면 isNaN 함수가 쓰여진 것을 확인할 수 있는데요,
이 함수는 isNotaNumber 의 약자로서, 눈치채셨는지 모르겠지만 이 함수의 인자값으로 들어간 값이 숫자일 경우에는 false값을 반환하고, 숫자값이 아닌값이 있을때에는 true 값을 반환합니다. 그래서 조건문이 실행되는 겁니다.
그리고 숫자값이 아닌 값이 있을 때, 메시지를 출력하고, select()함수를 통해서 input1 폼에 focus를 줌과 동시에 수정이 가능하도록 값들 전체에 대해서 블럭을 지정하여 줍니다.
2. 키 입력 방지
|| event.keyCode==8 ) ){
alert("이것은 숫자가 아닙니다. ");
event.returnValue=false;
- 여기서는 키 입력과 관련되서 이벤트가 발생할 수 있도록 폼 부분에서 onkeydown 이벤트 핸들러를 사용해 주었습니다.
그리고 불러온 check_input2_onkeydown()에서 if문을 유심히 보셔야 하는데요. 위의 이벤트 핸들러를 통해 들어온 키 값을 구별하기 위해 event 객체의 keyCode 프로퍼티를 사용합니다. 이 프로퍼티는 아스키코드 값을 통해 키값을 구별할 수 있도록 해놓았는데요. 각 키들의 아스키 코드 값은 다음의 아스키 코드표를 참고하시면 됩니다.
출저 : http://blog.naver.com/pureb612b
Dec(Decimal) -이하 십진수-의 부분을 봐야 할텐데요. 숫자의 십진수 값이 48에서 57인것을 알 수 있구요,
여기에는 설명되어 있지 않지만, 키패드의 십진수 값이 96에서 105입니다. 그리고 숫자 말고도 백스페이스도 쓸 수 있도록 백스페이스 코드값 8도 사용했구요. 그래서 이상 조건문이 완성되겠구요.
이것 외에도 핵심인 event.returnValue 가 남아있습니다. 이것은 무엇일까요?
키값을 입력받은 것도 이벤트잖아요? false로 지정함으로써 조건문에 기술하지 않은 키 값을 받았을때, 그 키값이 입력되지 않도록 하는데에 목적이 있습니다.
입력되고나서 지우는 방법도 있지 않나라는 질문에 생각해 볼 수 있는 방법이 두개가 있는데요?
첫번째는 \b, 즉 백스페이스바를 활용한 방법과 두번째는 subString을 통해서 입력되어 있는 길이보다 -1 만큼 작게 하면 같은 효과를 낼 수 있지 않나 입니다. 하지만 그 두방법은 문제가 있습니다. 해보시면 아실 듯합니다.
결과화면
|
궁금하시거나 도움줄 말이 있으시면 댓글 부탁드립니다 ^^ |
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 'button', 클릭한 횟수 알아내기! (0) | 2012.06.25 |
|---|---|
| [자바스크립트] 'forms', 폼을 배열로 접근하자! (0) | 2012.06.25 |
| [자바스크립트] 유효성 검사, 모든 폼에 값이 입력되도록 해보자! (5) | 2012.06.19 |
| [자바스크립트] 'focus', 엔터 누르고 이동하자! (2) | 2012.06.19 |
| [자바스크립트] 'image', 클릭했을때 사진을 바꿔보자! (10) | 2012.06.18 |
