웹 개발자라면 회원가입시 이름, 이메일, 핸드폰등등 필수 항목을 입력 했는지 않했는지에 따라 다시 입력 할수 있도록 포커스를 주고 다시 체크하는 것을 무수히 반복하게 되는데, 이때 보통 IF 문을 사용하면 문장이 많이 길어지고 또 항목이 추가 되면 또 변경 해주어야 하고 ㅡㅡ
그래서 Form 속성의 elements[] 를 이용하면 좀 더 쉽게 해결 할수 있습니다.
<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function check(){
var form1 = document.form1;
for(var i =0 ; i < form1.elements.length ; i++){
if(form1.elements[i].value==""){
alert(form1.elements[i].title+" 부분을 입력하여 주십시오" );
form1.elements[i].focus();;
form1.elements[i].style.background = "yellow";//<-- 이눔을 추가해 주는 것이 좋을듯...ㅋㅋ
return false;
}
if(form1.elements[i].name=="passwd_confirm"
&& form1.elements[i].value!=form1.elements[i-1].value){
alert("패스워드가 일치하지 않습니다.\n확인하여 주십시오" );
return false;
}
}
return true;
}
</script>
</head>
<body onload="document.form1.elements[0].focus()">
<form action="" method="post" onsubmit="return check()" name="form1">
<table>
<tr><td>이름</td><td><input type="text" name="name" title="이름"></td></tr>
<tr><td>아이디</td><td><input type="text" name="id" title="아이디"></td></tr>
<tr><td>패스워드</td><td><input type="password" name="passwd" title="패스워드"> </td></tr>
<tr><td>패스워드 확인</td><td><input type="password" name="passwd_confirm" title="패스워드확인"> </td></tr>
<tr><td>전화번호</td><td><input type="text" name="tel" title="전화번호"></td></tr>
<tr><td>핸드폰번호</td><td><input type="text" name="phone" title="핸드폰번호"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="테스트"></td></tr>
</table>
</form>
</body>
</html>
이 글은 네이버에서 발췌한 글을 에디터 하였습니다.
7th Story | 일리
http://blog.naver.com/innoc99/140053920893