[JavaScript] 폼 유효성 검사

1.  파일첨부

 

 [  파일첨부가 있을 경우  ] 중요!
form name="registerFrm" action="register.do" method="post" 와 같이하면 파일은 절대 전송이 안되어진다.
form name="registerFrm" action="register.do" method="post" enctype="multipart/form-data" 로 해야만
파일이 전송 되어진다. 

<form name="registerFrm" method="post" enctype="multipart/form-data">

 

---

2. 출생년도 및 나이

<select>태그로 출생년도 선택하기 및 나이 계산하기

<select>태그는 드롭다운 박스를 만드는 틀이며, 

<option>태그를 통해 드롭다운박스 내부의 내용물 즉, item을 만들 수 있다.

 

 

※ [참고] ※ 

[ NaN 이란 ] 
Not a Number 의 축약형으로, 다음과 같다.
isNaN(값)  :   값이 숫자가 아니라면 true 
isNaN(값)  :   값이  숫자 이라면  false 

 

 

1.  먼저 <select> 태그의 id 속성값에 1950년 ~ 2022년도를 for문을 통해 넣어준다.

 

  let s_option_1 = "<option>출생년도1</option>";   // s_option_1 : select 태그에 있는 option이란 뜻으로 임의로 넣음.
  for(let i=0; i<(currentYear-1950+1); i++) {      // 1950 ~ 2022년도 까지 넣어줄 것이다. 즉, 73번 돌린다.
      s_option_1 += "<option>"+(1950+i)+"</option>";
}// end of for---------------------------

document.getElementById("birthYear1"). innerHTML = s_option_1;


  let s_option_2 = "<option>출생년도2</option>";  // s_option_1 : select 태그에 있는 option이란 뜻으로 임의로 넣음.
  for(let i=0; i<(currentYear-1950+1); i++) {     // 1950 ~ 2022년도 까지 넣어줄 것이다. 즉, 73번 돌린다.
      s_option_2 += "<option>"+(1950+i)+"</option>";
}// end of for---------------------------

document.getElementById("birthYear2"). innerHTML = s_option_2;


  let s_option_3 = "<option>출생년도3</option>";  // s_option_1 : select 태그에 있는 option이란 뜻으로 임의로 넣음.
  for(let i=0; i<(currentYear-1950+1); i++) {     // 1950 ~ 2022년도 까지 넣어줄 것이다. 즉, 73번 돌린다.
      s_option_3 += "<option>"+(1950+i)+"</option>";
}// end of for---------------------------

document.getElementById("birthYear3"). innerHTML = s_option_3;

 

 

2.  "출생년도" 드롭다운박스를 다음과 같이 3가지 방식으로 보여지게 한다.

      <selcet>태그는 'click' 대신에 'change'를 쓴다. 

      드롭다운박스에서 선택을 했을 때, 숫자가 아닌경우와 숫자인 경우를 if문으로 처리하고,

      올바르게 숫자를 선택하면 나이를 계산하도록 한다.

 

<나이 계산하기>
const now = new Date();                       // 자바스크립트에서 현재날짜시각을 알려주는 것이다.
const currentYear = now.getFullYear();  // 현재년도

const age = currentYear - Number(val) + 1;

   

① 첫번째 방식 -  addEventListener() 함수 사용하기

 

const select1 = document.getElementById("birthYear1");
		
select1.addEventListener('change', ()=>{  // <selcet>태그는 'change'를 쓴다.


    const val = select1.value;  // "birthYear1".value

    if(isNaN(val)) {  // "출생년도1"  ==> 즉, 숫자가 아니라면
        // NaN ==> Not a Number
        // isNaN(값) ==> 값이 숫자가 아니라면 true 
        // isNaN(값) ==> 값이 숫자   이라면 false 
        alert("태어난 년도를 선택하세요");
        document.getElementById("age").innerHTML = "";
    }
    else{  // 숫자라면
        const age = currentYear - Number(val) + 1;
        document.getElementById("age").innerHTML = age;
    }

});

 

② 두번째 방식 -  onchange() 함수 사용하기

 

     여기서는 onchange() 함수에서 화살표함수로 축약한 형태이다.

 

const select2 = document.getElementById("birthYear2");
		
select2.onchange = ()=>{  // onchange 로 해야하지 onChange 하면 작동을 하지 않는다.!!  onChange(x)  onchange(o)

    const val = select2.value;  // "birthYear2".value

    if(isNaN(val)) {  // "출생년도2"  ==> 즉, 숫자가 아니라면
        // NaN ==> Not a Number
        // isNaN(값) ==> 값이 숫자가 아니라면 true 
        // isNaN(값) ==> 값이 숫자   이라면 false 
        alert("태어난 년도를 선택하세요");
        document.getElementById("age").innerHTML = "";
    }
    else{  // 숫자라면
        const age = currentYear - Number(val) + 1;
        document.getElementById("age").innerHTML = age;
    }
};

 

 

 

③ 세번째 방식 -  함수선언식 사용하기

 

     함수선언식은 아래과 같은 구문이다.

     함수표현식과 달리 함수를 생성하면 계속해서 불러와 사용할 수 있다.

      param 은 넘어온 값을 입력해준다.

function 함수명(param) {

}

 

// == Function Declaration == //   ==> 아래의 onchange 속성은 문서가 로딩된 후 바로 호출된다. 따라서 window.onload = function() {} 함수를 안쓰고 바로 입력해도 되고, 함수 안에다가 입력해도 된다.
      function goAge(select) {  // select 는 넘어온 값 
		
    	  const val = select.value;  // "birthYear3".value
  		
			if(isNaN(val)) {  // "출생년도3"  ==> 즉, 숫자가 아니라면
				// NaN ==> Not a Number
				// isNaN(값) ==> 값이 숫자가 아니라면 true 
				// isNaN(값) ==> 값이 숫자   이라면 false 
				alert("태어난 년도를 선택하세요");
				document.getElementById("age").innerHTML = "";
			}
			else{  // 숫자라면
				const age = currentYear - Number(val) + 1;
				document.getElementById("age").innerHTML = age;
			}
    	  
	  }// end of function goAge(select) {}-----------------------------

 

---

 

 ※ < html> 

<div id="container">
  <form name="registerFrm" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend>회원가입정보</legend>
         <ul>
         .......
		<li>
           <label class="title">출생년도</label>
           <select class="myselect" name="birthYear" id="birthYear1"></select>
           <select class="myselect" name="birthYear" id="birthYear2"></select>
           <select class="myselect" name="birthYear" id="birthYear3" onchange="goAge(this)"></select>  <!-- onchange 는 문서로딩된 후 바로 호출된다.  -->
        </li>

        <li>
           <label class="title">현재나이</label>
           <span id="age" style="font-size: 12pt; color: red;"></span>세
        </li>
         .......
     </ul>
  </fieldset>
  </form>
</div>

 

※ [참고] ※ 

onchange 속성은 문서가 로딩된 후 바로 호출된다. 
따라서 window.onload = function() {} 함수를 안쓰고 바로 입력해도 되고, 함수 안에 입력해도 된다.