사용자 입력 상자에 입력된 값이 나이인지 아닌지 그리고 적절한지를 판단하는 스크립트를 작성해 보았습니다.
HTML 펼치기..
CSS 보두기..
Java Script
{
// Init
root = document.getElementById("exam");
inputs = root.getElementsByTagName("input"); for(var i=0; i<inputs.length; i++)
{
if(inputs[i].type == "submit")
{
btn = inputs[i];
}
}
1. form 영역안에서 타입이 submit인 input 요소를 찾아서 btn 변수에 정의한다.
// Submit
btn.onclick = function()
{
var block = this.parentNode;
var fields = block.getElementsByTagName("input");
for(var i=0; i<fields.length; i++)
{
var obj = fields[i];
if(chkBlank(obj) == false) return false; // Blank Value Check
if( (obj.type == "text") && (getClassName(obj.className) == true) ) // class Attribute is "numeral"
{
if(checkNumeral(obj.value) == false)
{
obj.focus();
obj.value = "";
return false;
}
if(obj.id == "age") // ID Attribute is "age"
{
var user_age = parseInt(fields[i].value); // Conversion
if(checkMan(user_age) == false)
{
fields[i].focus();
obj.value = "";
return false;
}
}
}
}
alert("전송 완료!");
return false;
}
}
2. btn(submit)을 클릭한 경우 타입이 ‘text’인 input 요소의 값의 유효성 체크를 시행하여 아무 이상이 없으면 ‘전송 완료!’메세지를 출력한다.
{
if( (obj.value == "") || (obj.value == null) )
{
var tit = obj.parentNode.firstChild.nodeValue;
alert(tit+"이(가) 채워지지 않았습니다.");
obj.focus();
return false;
}
}
3. 사용자 입력 상자의 값이 빈 경우를 체크한다.
{
var cls = str.split(" ");
var hasClass = false;
for(var i=0; i<cls.length; cls++)
{
if(cls[i] == "numeral")
{
hasClass = true;
}
return hasClass;
}
}
4. class 값을 가져와서 조건식(if)을 통해서 참/거짓만을 돌려주는 함수다.
{
var numeral = "0123456789";
for(var j=0; j<str.length; j++)
{
if(numeral.indexOf(str.charAt(j)) == -1) { alert("아라비아 숫자를 입력해주세요"); return false; }
}
}
5. getClassName 함수를 통해서 ‘numeral’ 이라는 class 가 포함된 경우(getClassName 함수가 true를 리턴한 경우) 숫자인지 아닌지를 확인한다.
6. 숫자는 정수형만을 선택하였고, 0부터 9까지의 숫자를 numeral 변수에 문자열로 담아둔다.
7. 반복문을 통해서 numeral 변수에 담겨진 숫자(문자형)가 담겨져 있는지 확인하여, 하나라도 숫자 아닌 것이 포함된 경우 경고창을 띄운다.
{
if(user_age < 0 || user_age > 100)
{
alert(user_age+"살? 귀신이냐! 외계인이냐?!");
return false;
}
}
8. 전달 받은 값이 숫자인지 확인이 되었다면 마지막으로 적절한 나이인지 확인한다. 0세 이상, 100세 이하의 경우를 적절한 나이로 설정했다.
bomnun_js_2.zip
