Javascript [ 파일 전송 ]

파일 전송

<form name = "이름" enctype="multipart/form-data">
	...
</form>

Button 의 기본타입

• button 의 기본타입은 button 이 아니라 submit 이다.

<button type="button" id="이름">type="button"</button>
<button type="submit" id="이름">type="submit"</button>
<button type="reset" id="이름">type="reset"</button>

<button type="" id="이름">type="submit"</button>
<button id="이름">type="submit"</button>

---

.action

• 담겨진 데이터를 전송할 위치 잡기
• 보낼객체.action = "백엔드 주소"

frm.action = "register.do";		// 데이터 전송 위치 잡기
frm.submit();					// 전송하기

---

Button 전송

document.querySelector("input[type='button']")
  				.addEventListener('click, () =>{
   const frm = document.form의name;
 // ----------------------------------------------------- //
   // =========== 아이디 =========== //
     /* 
     	5글자 이상 20글자 이하, 
        첫글자 영문, 나머지글자 영문자 또는 숫자
     */
   // 정규표현식 규칙 생성
   const regExp_userid = /^[A-Za-z][A-Za-z0-9]{4,19}$/;
   // 정규표현식 검사
   const bool_userid = regExp_userid.test(frm.userid.value);
	if(!bool_userid){
    	document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
      	frm.userid.value = "";	// 입력값 지우기
      	frm.userid.focus();		// focus 주기
      	return;					// 종료
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
          										= "";
    }
// ----------------------------------------------------- //
	// =========== 비밀번호 =========== //
	/* 
     	8글자 이상 15글자 이하, 
        영문자, 숫자, 특수문자 혼합
     */
   // 정규표현식 규칙 생성
	const regExp_passwd 
    = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])
    								(?=.*[^a-zA-Z0-9]).*$/g;
	// 정규표현식 검사
   const bool_passwd = regExp_passwd.test(frm.passwd.value);
	if(!bool_passwd){
    	document.querySelector("에러메시지위치").innerHTML
          									= "에러메시지";
      	frm.passwd.value = "";	// 입력값 지우기
      	frm.passwd.focus();		// focus 주기
      	return;					// 종료
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
          										= "";
    }
// ----------------------------------------------------- //
	// =========== 비밀번호 확인 동일한지 체크 =========== //
	const passwd_val 
    	= document.querySelector("암호확인위치").value;
	if(frm.passwd.value != passwd_val){
    	document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
      
      	frm.passwd.value = "";	// 입력값 지우기
      	document.querySelector("암호확인위치").value = "";	
      
      	frm.passwd.focus();		// focus 주기
      	return;
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
          										= "";
    }
// ----------------------------------------------------- //
	// =========== 성명 =========== //
	/* 
     	공백없이 한글로만 입력
        2글자 이상 ~ 6글자 이하
     */
   	// 정규표현식 규칙 생성
	const regExp_name = /^[가-힣]{2,6}$/;
	// 정규표현식 검사
	const bool_name = regExp_name.test(frm.name.value);
	if(!bool_name){
      document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
      	frm.name.value = "";	// 입력값 지우기
      	frm.name.focus();		// focus 주기
      	return;					// 종료
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
          										= "";
	}
// ----------------------------------------------------- //
	// =========== 이메일 =========== //
   	// 정규표현식 규칙 생성
	const regExp_email 
    = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]
    			([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 
	// 정규표현식 검사
	const bool_email = regExp_email.test(frm.email.value);
	if(!bool_email){
    	document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
      	frm.email.value = "";	// 입력값 지우기
      	frm.email.focus();		// focus 주기
      	return;					// 종료
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
          										= "";
    }
// ----------------------------------------------------- //
	// =========== 성별 =========== //
   	// 무조건 하나 선택
	const gender_radio_list = frm.gender;
	let gender_bool = false;
	for(let gender_radio of gender_radio_list){
    	if(gender_radio.checked){	// 라디오 선택한 경우
        	gender_bool = true;
          	break;
        }
    }	// end of for(let gender_radio of gender_radio_list)
	if(!gender_bool){
    	document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
      												= "";
    }
// ----------------------------------------------------- //
	// =========== 취미 =========== //
   	// 체크박스 선택 2개 이상
	const hobby_checkbox_list = frm.hobby;
	let checked_cnt = 0;
	for(let hobby_checkbox of hobby_checkbox_list){
    	if(hobby_checkbox.checked){	  // 체크박스 선택한 경우
        	checked cnt++;
        }
    }	// end of for~of----------

	if(checked_cnt < 2){
    	document.querySelector("에러메시지위치").innerHTML
      										= "에러메시지";
    }
	else{
    	document.querySelector("에러메시지위치").innerHTML
      												= "";
// ----------------------------------------------------- //
	// =========== 생년월일 선택유무 검사 =========== //
      if(isNaN(frm.birthYear.value) || isNaN(frm.birthMonth.
 value) || isNaN(frm.birthDate.value) || !checkValidDate
(frm.birthYear.value + " - " + frm.birthMonth.value 
 						+ " - " frm.birthDate.value)){
      // 숫자로 입력하거나, 존재하지 않는 날짜를 입력한 경우
   		document.querySelector("에러메시지위치").innerHTML
        									= "에러메시지";
        return;
      }
      else{
      	document.querySelector("에러메시지위치").innerHTML
        											= "";
      }
// ----------------------------------------------------- //
	// =========== 최종학력 선택 유무 =========== //
     if(frm.school.value == "선택하세요"){
     	document.querySelector("에러메시지위치").innerHTML 
          											= "에러메시지";
     }
     else{
       document.querySelector("에러메시지위치").innerHTML 
          													= "";
     }
// ----------------------------------------------------- //
	// =========== 가입인사말 =========== // 
    if(frm.registerComment.value.trim() == ""){
    	document.querySelector("에러메시지").innerHTML = "에러메시지";
      	frm.registerComment.value = "";
      	frm.registerComment.focus();
      	return;		// 종료
    }
   	else{
    	document.querySelector("에러메시지").innerHTML = "";
    }
// ----------------------------------------------------- //
     frm.action = "백엔드 주소";		// 데이터 전송 위치 잡기
     frm.submit();					// 전송하기
})	// end of 버튼 클릭한 경우

---

Submit 전송

const frm = document.form의 name;

frm.onsubmit = functiion(){
	/*
  	정규표현식, action, submit() ...
  	*/
}	// end of frm.onsubmit = functiion()----------------

---

정리

• 15_form_regular_expression
  -> form_regular_expression.html, form_regular_expression.css, form_regular_expression.js