10.JavaScript_JavaScript로 폼 유효성 검정

1. 아이디 검사

if(myform.id.value == ""){
  alert("id 누락");
  return false;
}

 

 

2. 비밀번호 검사

if(myform.pw.value ==""){
  alert("pw 누락");
  return false;
}
if(myform.pw.value.length < 3 || myform.pw.value.length > 5){
  alert("비밀번호는 3~5자리만 가능합니다.");
  return false;
}
if(isNaN(myform.pw.value)){
  alert("숫자만 입력하세요");
  return false;
}

• 입력된 pw 값이 숫자로 변환 불가능하면 → true → 경고창 띄움
• "123" → 숫자 변환 가능 → false → 통과
• "abc" → 숫자 변환 불가 → true → 오류

 

3. 라디오 버튼 검사 (노래 선택)

len = myform.song.length;
flag = false;
for(i=0; i<len; i++){
  if(myform.song[i].checked){
    flag = true;
    break;
  }
}
if(flag == false){
  alert("노래 하나는 선택해야 합니다.");
  return false;
}

 

 

4. 체크박스 검사 (영화 선택)

len = myform.movie.length;
flag = false;
for(i=0; i<len; i++){
  if(myform.movie[i].checked){
    flag = true;
    break;
  }
}
if(flag == false){
  alert("영화 하나는 선택해야 합니다.");
  return false;
}

 

 

5. 드롭다운 검사 (취미 선택)

if(myform.hobby.selectedIndex == 0){
  alert("취미 하나는 선택해야 합니다.");
  return false;
}

 

 

6. 버튼 동작

function goNaver(){
  location.href="https://naver.com/"
}

 

 

7. HTML 버튼 (return 꼭 작성) 

<input type="submit" value="전송" onClick="return check()">

 

📌 동작 방식

1. type="submit"
   • 기본 동작은 폼(form)을 action에 지정된 곳으로 전송.
2. onClick="return check()"
   • 버튼 클릭 시 check() 함수를 실행.
   • check() 함수의 반환값이 true → 전송 진행 / false → 전송 중단.

---

 

isNaN(값)

isNaN은 is Not a Number의 줄임말로,
👉 "이 값이 숫자가 아니냐?" 를 검사하는 자바스크립트 내장 함수

 

 

• 숫자로 변환할 수 없는 값이면 → true
• 숫자로 변환할 수 있는 값이면 → false

 

isNaN(123);       // false (숫자니까 숫자가 아님이 아님 ❌)
isNaN("123");     // false ("123"은 숫자로 변환 가능 → 123)
isNaN("hello");   // true  ("hello"는 숫자 변환 불가)
isNaN("");        // false (빈 문자열은 숫자 0으로 변환됨)
isNaN(true);      // false (true → 1로 변환 가능)
isNaN(false);     // false (false → 0으로 변환 가능)
isNaN(undefined); // true  (숫자로 변환 불가)

 

📝 정리

• input type="submit"에 onClick="return check()" → 검사 실패 시 false 반환 → 제출 막힘
• 라디오·체크박스는 반복문으로 체크 여부 확인
• isNaN()으로 숫자 여부 판정
• select는 selectedIndex로 선택값 확인